React-Three-Fiber中移动立方体位置重置失效问题求助

问题根源 #

你当前的代码每次在useFrame中直接将cubeRef.current.position.y赋值为time * 100，这会彻底覆盖掉你重置位置的操作。比如第一次触发重置后，下一帧clock.getElapsedTime()仍在增长，position.y会被重新设置为更大的数值，导致重置逻辑仅生效一次。

解决方案 #

方案一：增量更新位置（可控性更强）

通过维护一个位移偏移量，每帧基于时间增量（delta）更新位置，避免直接依赖总时间覆盖重置操作：

import { useRef, useState } from 'react';
import { useFrame } from '@react-three/fiber';

// 组件内部代码
const cubeRef = useRef(null);
const [yOffset, setYOffset] = useState(0);

useFrame(({ delta }) => {
  if (!cubeRef.current) return;
  const height = window.innerHeight;
  const moveSpeed = 100; // 移动速度，负数即为下落

  // 每帧累加位移
  setYOffset(prev => prev + moveSpeed * delta);

  // 超出阈值时重置偏移量，实现循环
  if (yOffset > height / 2) {
    setYOffset(prev => prev - height * 2);
  }

  cubeRef.current.position.y = yOffset;
});

方案二：取模运算简化循环（代码更简洁）

利用取模运算直接让位置在指定区间内循环，无需手动重置：

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';

// 组件内部代码
const cubeRef = useRef(null);

useFrame(({ clock }) => {
  if (!cubeRef.current) return;
  const height = window.innerHeight;
  const moveSpeed = 100; // 负数为下落效果
  const cycleRange = height; // 循环的总高度范围

  // 取模运算实现位置循环，区间为 [-height/2, height/2]
  cubeRef.current.position.y = (clock.getElapsedTime() * moveSpeed) % cycleRange - height / 2;
});

补充说明 #

如果需要实现无限下落（而非原型中的向上移动），只需将moveSpeed设置为负数即可，两种方案均适用。

内容的提问来源于stack exchange，提问作者Alexandre PUJOL