React-Three-Fiber中useRef可改网格位置，Cannon.js useBox不行

原因 #

当你用useBox给网格添加物理效果时，React-Three-Fiber会自动绑定Cannon物理刚体和Three.js网格：物理引擎会每一帧根据刚体的运动计算结果，同步更新网格的位置和旋转。这时候你直接修改网格的position，下一次物理同步就会把网格位置拉回刚体的位置，所以你的修改会被覆盖，看起来没效果。

解决方法 #

要改就改物理刚体的位置，而不是网格本身，有两种常用方式：

方式1：通过网格引用获取刚体修改 #

useBox返回的网格引用（boxRef.current）上挂载了对应的Cannon刚体，直接操作刚体的位置即可：

// 直接修改刚体X轴位置
boxRef.current.body.position.x += 1;

// 或者用set方法设置完整位置
boxRef.current.body.position.set(
  boxRef.current.body.position.x + 1,
  boxRef.current.body.position.y,
  boxRef.current.body.position.z
);

// 如果刚体处于休眠状态（比如静止不动），需要唤醒它才能生效
boxRef.current.body.wakeUp();

方式2：使用useBox返回的API #

useBox会返回一个API对象，用来直接操控物理刚体的属性：

const [boxRef, api] = useBox(() => ({
  mass: 1,
  position: [0, 4, 0],
  velocity: [0, 1, 0],
}));

// 通过API修改位置
api.position.set(api.position.x + 1, api.position.y, api.position.z);

额外提示 #

如果是想让物体自然移动，更推荐修改刚体的速度或者施加力（比如boxRef.current.body.velocity.x += 1），这样更符合物理模拟的逻辑，避免硬改位置导致的物理状态冲突。

内容的提问来源于stack exchange，提问作者Ali Bahaari