React-三纤维动画在滚动时重置

Question

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

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

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

我的 Home 组件正在使用 Router 进行 React 渲染在 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>
    )
}

主页.js

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

应用程序.js

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

        );
    };
}

链接到我的工作代码：https://github.com/NikAtNight/waterportfolio/blob/master/homepage/src/components/MainAnimation/PolyWater/PolyWater.js

Answer 1

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

\n

因此，经过一番挖掘后，由于drcmda 的评论，我找到了一个快速修复方法。显然，在渲染的情况下，画布始终监听滚动交互。您只需在元素scroll: false上进行设置即可禁用此行为Canvas。

\n

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

\n

\n

\xe2\x9a\xa0\xef\xb8\x8f 使用此快速修复的唯一缺点是您无法再在画布中使用悬停/单击/滚动元素。

\n

\n