根据键盘 threejs 更改对象旋转动画方向

Change object rotating animation direction based on keyboard threejs

本文关键字：对象 旋转 动画 方向 键盘 threejs      更新时间：2023-09-26

我可以通过使用以下方法设置关键控件来更改对象旋转方向：

 case 37:
      scene.rotation.x -= 0.01;
      break
 case 38:
      scene.rotation.z -= 0.01
      break

但这里的旋转是离散的，这意味着如果我停止按下键盘，我的场景也会停止旋转。我知道我可以在渲染函数中设置 requestAnimationFrame 并指定旋转方向来制作动画。如何根据键盘输入更改旋转方向并仍然保持动画的运行？

0）有必要存储对象的转速：

mesh.rotSpeed = { x: 0, y: 0};

1） 通过单击更改有关相应轴的旋转速度所需的箭头：

switch (e.keyCode){
    case 37:
      mesh.rotSpeed.x += 0.01;
      break;
    case 39:
      mesh.rotSpeed.x -= 0.01;
      break;               
    case 38:
      mesh.rotSpeed.y +=0.01;
      break;
    case 40:
      mesh.rotSpeed.y -=0.01;
      break;                
}

2） 在动画循环中以所需的速度绕轴旋转对象：

mesh.rotation.x += mesh.rotSpeed.x;
mesh.rotation.y += mesh.rotSpeed.y;

JSFiddle

相关文章：