-1

我正在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);
}

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

提前致谢！

4

2 回答 2

0

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

围绕世界轴转动对象。

于 2013-07-23T18:11:41.990 回答
0

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

于 2013-07-19T09:11:47.510 回答