我正在尝试使用 React 和 Three.js 构建一个 3d 动画，其中本质上是一辆汽车开始向前移动，因此我使用 useRef 钩子减少了它在轴中的 z 位置的值。当它到达某个点（例如-100）时，我将动画的状态设置为 false，动画停止，但是当我尝试将其 z 位置重置为初始值时，它不会发生。我在 if 语句中注意到的是，即使我更改了 startCarAnimation 值的状态，该值在控制台中仍然为 true。我尝试通过使用 useEffect 挂钩和 startCarAnimation 作为依赖项来更改该值，但没有成功。 这是我的组件。 Timer 组件只是在某些事件发生后将 startCarAnimation 设置为 true
App.jsx
import React , { Suspense, useState } from 'react';
import { Canvas } from '@react-three/fiber';
import Scene from './Scene';
import Timer from './Timer';
function App() {
const [startCarAnimation, setStartCarAnimation] = useState(false)
return (
<main >
<Timer setStartCarAnimation={setStartCarAnimation}/>
<Suspense fallback={null}>
<Canvas shadows>
<Scene startCarAnimation={startCarAnimation} setStartCarAnimation={setStartCarAnimation} />
</Canvas>
</Suspense>
</main>
);
}
export default App;
import React, { useRef, useState, useEffect } from "react";
import { PerspectiveCamera } from "@react-three/drei";
import { useFrame,useLoader} from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
export default function Scene({ startCarAnimation, setStartCarAnimation }) {
const gltf = useLoader(GLTFLoader, '../public/assets/car/scene.gltf')
const groupRef = useRef();
const cameraRef = useRef();
const targetPosition = -100;
const [zPosition, setZPosition] = useState(0);
useFrame((state, delta) => {
if (startCarAnimation) {
groupRef.current.position.z = zPosition;
setZPosition((prevScale) => Math.max(prevScale - 2, targetPosition));
gltf.materials.tyres.map.rotation += 0.1;
if(targetPosition == zPosition){
setStartCarAnimation(false)
setZPosition(0)
console.log(startCarAnimation)
}
}
});
return (
<>
<PerspectiveCamera ref={cameraRef} makeDefault fov={30} position={[0, 0, 0.52]} />
<group ref={groupRef} position={[0, -0.9 , 0]} rotation={[0,Math.PI,0]} >
<directionalLight intensity={8} position={[0,0,1]}/>
<ambientLight intensity={3}/>
<primitive object={gltf.scene} />
</group>
</>
);
}