如何在反应三光纤中n秒后停止useFrame

Question

嗨，我在useFrame中有一个动画在点击后播放我需要在2秒后停止它例如

const [clicked, click] = useState(false)
useFrame((state, delta) => (clicked ? group.current.rotation.x += 0.01 : 
group.current.rotation.x))

任何建议吗?由于

Answer 1

我使用use-timer库(use-timer)使其工作

使用useTimer钩子:

const { time, start, pause, reset, status } = useTimer();

在useFrame中，您决定何时旋转立方体:

useFrame(() => {
if (status === "RUNNING") {
boxRef.current.rotation.x += 0.05;
}
if (status === "RUNNING" && time >= 2) {
pause();
reset();
}
})

点击方框启动定时器:

const handleClick = () => {
if (status === "PAUSED" || status === "STOPPED") {
start();
}};

我很确定你也可以对useFrame中的状态做一些事情，但那感觉更复杂。(state.clock.elapsedTime)