如何在Three.js中让立方体缓慢旋转90度？

当前按下w/a/s/d键时，立方体瞬间完成90度旋转，无法看到动态过程。想要让立方体缓慢旋转，需要把一次性的角度变更拆分成多帧逐步完成，核心思路是在动画循环中逐步逼近目标旋转角度。

以下是修改后的完整代码：

boxWidth = 1;
boxHeight = 1;
boxDepth = 1;

const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

const materials = [
  new THREE.MeshBasicMaterial({color: 0x0000ff}),
  new THREE.MeshBasicMaterial({color: 0xffffff}),
  new THREE.MeshBasicMaterial({color: 0xffff00}),
  new THREE.MeshBasicMaterial({color: 0x008000}),
  new THREE.MeshBasicMaterial({color: 0xffa500}),
  new THREE.MeshBasicMaterial({color: 0xff0000}),
]

const cube = new THREE.Mesh(geometry, materials);

// 存储目标旋转角度，初始与当前角度一致
let targetRotationX = cube.rotation.x;
let targetRotationY = cube.rotation.y;
// 旋转速度控制，值越大旋转越快
const rotationSpeed = 0.05;

function onDocumentKeyDown(event) {
  switch(event.keyCode) {
    case 87: // w键：X轴旋转+90度
      targetRotationX += Math.PI / 2;
      break;
    case 83: // s键：X轴旋转-90度
      targetRotationX -= Math.PI / 2;
      break;
    case 65: // a键：Y轴旋转-90度
      targetRotationY -= Math.PI / 2;
      break;
    case 68: // d键：Y轴旋转+90度
      targetRotationY += Math.PI / 2;
      break;
  }
};

document.addEventListener("keydown", onDocumentKeyDown, false);

// THREE.js动画循环核心
function animate() {
  requestAnimationFrame(animate);
  
  // 线性插值逼近目标角度，实现平滑过渡
  cube.rotation.x += (targetRotationX - cube.rotation.x) * rotationSpeed;
  cube.rotation.y += (targetRotationY - cube.rotation.y) * rotationSpeed;
  
  // 替换为你自己的渲染器、场景和相机变量
  renderer.render(scene, camera);
}

// 启动动画循环
animate();

关键修改说明： #

• 新增targetRotationX/Y变量存储最终旋转角度，按键时仅更新目标值，不直接修改立方体旋转属性
• rotationSpeed控制旋转快慢，建议取值0.01-0.1，可按需调整
• 通过animate循环实现逐帧旋转，用线性插值让当前角度逐步接近目标角度，产生平滑动态效果
• 确保代码中已配置THREE.js的渲染器、场景和相机（这是THREE.js基础框架，你应该已有对应代码）

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