小编Nik*_*ter的帖子

我使用 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 …