（立方体）用three.js旋转

Question

我正在做三个.js 的项目，我有一个立方体，可以用一些按钮（箭头）旋转它。旋转有效，但经过一些旋转后，它不再朝正确的方向旋转。可能是因为立方体的轴被移动了？但这让我有点困惑..

我需要立方体能够通过一些控件向上、向下、向左和向右旋转。这基本上是它目前的工作方式：

当按下一个方向时，比如“右”，我们用 tween.js 更新 mesh.rotation.y，直到 mesh.rotation.y 旋转 90 度角。

//SCENE, MESH,.. SETUP
...

function rotateRight(){
   var start = {x:cubeMesh.rotation.x, y:cubeMesh.rotation.y, z:cubeMesh.rotation.z};
   //RIGHT: y + 90°
   var end = {x:cubeMesh.rotation.x, y:cubeMesh.rotation.y + degreeToRadians(90),
              z:cubeMesh.rotation.z};

   var tween = new TWEEN.Tween(start)
      .to(end, 1000)
      .easing( TWEEN.Easing.Exponential.InOut )
      .onUpdate(function(){
         cubeMesh.rotation.x = this.x;
         cubeMesh.rotation.y = this.y;
         cubeMesh.rotation.z = this.z;
       })
   .start();
}

function animateScene(){
    requestAnimationFrame(animateScene);
    TWEEN.update();
    renderer.render(scene, camera);
}

我需要改变什么来保持这个立方体在正确的方向旋转？我们可以固定立方体的轴，这样它们就不会移动了吗？我已经阅读了有关世界轴与对象轴的内容，这是我需要更改的内容吗？如何实现？

提前致谢！

Answer 1

抱歉，无法发表评论，这肯定不是完美的答案，但如果您在旋转时遇到问题，也许您的补间不太正确？ 令我印象深刻的是，您的功能仅在 1 个轴上进行旋转，而您仍然更新所有三个轴。也许你应该离开 x 和 z 而只更新正确的轴？也许这对你的问题也有帮助，因为你知道你实际上在改变什么。不过，这只是一个想法。

Answer 2

想通了，感谢这篇文章： How to rotate a 3D object on axis three.js?

围绕世界轴转动对象。