2

我使用 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>
    )
}

主页.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>

        );
    };
}
4

2 回答 2

2

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

因此，经过一番挖掘，多亏了 drcmda 的评论，我找到了一个快速的解决方法。显然，在渲染的情况下，画布总是在监听滚动交互。您可以通过简单地设置元素scroll: false来禁用此行为。Canvas

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

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

于 2021-01-22T21:56:25.853 回答
2

我自己找到了解决办法。它在 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

于 2020-08-15T00:03:07.787 回答