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

【问题标题】：React-Three-Fiber Animation Resets on ScrollReact-Three-Fiber 动画在滚动时重置
【发布时间】：2020-12-04 14:05:30
【问题描述】：

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

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

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

我的 Home 组件正在 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>

        );
    };
}

【问题讨论】：

如果您仅在页面上有SeaScene 并且有很多空白区域仍然可以滚动，它还会发生吗？您的组件链中是否有任何以 SeaScene 为子级并被重新渲染的内容？
在场景下方添加空白区域同时仍然能够滚动会产生相同的结果。我更新了我的代码以显示我的主组件

标签： three.js react-three-fiber

【解决方案1】：

我自己找到了修复程序。它在 react-three-fibers github 上，只是不知道这将是修复。我将我的材质和几何图形从您声明它们的常规方式更改为以下方式。

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

页面链接 https://github.com/react-spring/react-three-fiber/blob/master/pitfalls.md

【讨论】：

谢谢！我也花了很长时间才找到。

【解决方案2】：

虽然@astronik 的答案对于整体性能来说要好得多。我只花了很长时间就更换了所有几何形状和材料。

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

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

⚠️ 使用此快速修复的唯一缺点是您不能再在画布中使用悬停/单击/滚动元素。

【讨论】：