Сброс анимации React-Three-Fiber при прокрутке

Question

Я создал низкополигональную анимацию воды, используя three.js и react-three-fiber. Анимация начинает воспроизводиться, когда моя веб-страница загружается, но когда вы начинаете прокручивать вниз, чтобы просмотреть другой контент на моей веб-странице, моя анимация сбрасывается и начинается снова.

PolyWater - это просто компонент, который я создал для создания низкополигональной воды с использованием вершин.

SeaScene экспортируется в компонент Home, который объединяет остальные мои компоненты вместе.

Компонент My 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>

        );
    };
}

Answer 1

Хотя ответ user13215430 намного лучше для общей производительности. Мне потребовалась целая вечность, чтобы заменить каждую геометрию и материал.

Итак, немного покопавшись, я нашел быстрое решение благодаря этому комментарию drcmda . По-видимому, холст всегда прослушивает взаимодействие прокрутки в случае рендеринга. Вы можете отключить это поведение, просто установив scroll: falseна Canvasэлемент.

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

⚠️ Единственным недостатком этого быстрого исправления является то, что вы больше не можете использовать элементы наведения/щелчка/прокрутки на холсте.

Answer 2

Я сам нашел исправление. Это было на react-three-fiber github, просто не знал, что это будет исправление. Я изменил свои материалы и геометрию с обычного способа, которым вы их объявляете, на способ, указанный ниже.

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

Ссылка на страницу https://github.com/react-spring/react-three-fiber/blob/master/pitfalls.md