React-Three-Fiber 动画在滚动时重置

Question

我使用 three.js 和 react-three-fiber 创建了一个低聚水动画。当我的网页加载时动画开始播放，但当您开始向下滚动以查看我网页上的其他内容时，我的动画重置并重新开始播放。

PolyWater 只是我创建的一个组件，用于使用顶点制作低多边形水。

SeaScene 导出到 Home 组件，该组件将我的其余组件合并在一起。

我的 Home 组件正在使用 Router

的 App.js 文件中呈现

SeaScene.js

import React, {useRef} from 'react'
import {Canvas, extend, useFrame, useThree} from "react-three-fiber"
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
import PolyWater from "./PolyWater/PolyWater";
import './SeaScene.css'

extend({OrbitControls})

const Controls = () => {
    const orbitRef = useRef();
    const {camera, gl} = useThree();

    useFrame(() => {
        orbitRef.current.update()
        camera.position.set(25, 12.5, -20)
        camera.rotation.set(-1.5, 0, 0)
    })

    return (
        <orbitControls
            args={[camera, gl.domElement]}
            ref={orbitRef}
        />
    )
}

const SeaScene = () => {
    return (
        <section id="home" className="home-section">
            <Canvas>
                <ambientLight intensity={0.2}/>
                <directionalLight color={0xffffff} position={[0, 50, 30]}/>
                <Controls/>
                <PolyWater/>
            </Canvas>
        </section>
    )
}

Home.js

class Home extends Component {
    render() {
        return (
            <div>
                <SeaScene/>
                <About/>
                <Work/>
                <Footer/>
            </div>
        );
    }
}

App.js

class App extends Component {
    render() {
        return (
            <Router>
                <div>
                    <section>
                        <NavBar/>
                        <Switch>
                            <Route exact path='/' component={Home}/>
                        </Switch>
                    </section>
                </div>
            </Router>

        );
    };
}

Answer 1

我自己找到了修复方法。它在 react-three-fibers github 上，只是不知道那会是解决方法。我将我的材料和几何形状从您声明它们的常规方式更改为以下方式。

const geom = useMemo(() => new BoxBufferGeometry(), [])
const mat = useMemo(() => new MeshBasicMaterial(), [])

一个link页面 https://github.com/react-spring/react-three-fiber/blob/master/pitfalls.md

Answer 2

虽然 @astronik 的答案对于整体性能来说要好得多。我只花了很长时间就替换了每个几何图形和 material.

所以经过一番挖掘，我找到了一个快速修复方法，感谢 this comment by drcmda。显然，canvas 总是在渲染的情况下监听滚动交互。您可以通过简单地在 Canvas 元素上设置 scroll: false 来禁用此行为。

   <Canvas resize={{ scroll: false }} >

⚠️ The only downside using this quick fix, is that you can not use hover/click/scroll elements in the canvas anymore.

React-Three-Fiber 动画在滚动时重置

React-Three-Fiber Animation Resets on Scroll

three.js

react-three-fiber