Question

我正在使用three.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

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

围绕世界轴转动物体。

Answer 2

抱歉，无法发表评论，这肯定不是完美的答案，但如果你有轮换问题，也许你的补间不太合适？让我注意的是，您的功能仅在1轴上进行旋转，并且您仍然更新所有三个轴。也许你应该放弃x和z，只更新正确的轴？也许这有助于你的问题，因为你知道你实际上在改变什么。不过，这只是一个想法。

（立方体）用three.js旋转

2 个答案: