如何在Three.js中实现元素滑动/平移动画，替代旋转动画？

Three.js原生支持平移动画效果，你目前的代码是通过修改模型的rotation属性实现旋转，平移仅需要修改模型的position属性或者调用内置平移方法即可。 #

核心实现逻辑 #

• 若需要沿世界坐标系固定方向平移：直接修改car.position.x/car.position.y/car.position.z的数值即可
• 若需要沿小车自身朝向移动（更符合车辆驾驶逻辑）：直接调用Three.js内置的translateX()/translateY()/translateZ()方法，这类方法会基于物体当前的旋转角度，沿自身坐标系移动，不需要手动计算方向向量

代码修改示例 #

你可以直接替换原有update函数，或者将逻辑合并到渲染帧回调中，以下是实现「方向键左右控制转向，上下控制前后移动」的代码：

// 原有监听键盘事件的代码不变
let keydown = '';
document.body.addEventListener('keydown', e => {
  keydown = e.key;
});
document.body.addEventListener('keyup', e => {
  keydown = '';
});

// 合并更新逻辑到渲染回调，删除原有单独的update函数调用
renderer.setAnimationLoop(() => {
  const moveSpeed = 1; // 移动速度，可根据需求调整
  const rotateSpeed = 0.05; // 转向速度，可根据需求调整
  switch (keydown) {
    case 'ArrowUp':
      car.translateX(moveSpeed); // 沿自身X轴前进（你的小车车头默认朝向X轴正方向）
      break;
    case 'ArrowDown':
      car.translateX(-moveSpeed); // 沿自身X轴后退
      break;
    case 'ArrowLeft':
      car.rotation.y += rotateSpeed; // 向左转向
      break;
    case 'ArrowRight':
      car.rotation.y -= rotateSpeed; // 向右转向
      break;
  }
  renderer.render(scene, camera);
});

如果你的小车需要限定移动范围，只需要在每次修改位置后加判断逻辑限制position的最大最小值即可。

内容的提问来源于stack exchange，提问作者Parking Master