javascript - 使用Tween精确绕世界轴旋转

我一直在尝试绕世界轴旋转一个立方体，但是它没有给出准确的结果。对我的最后一个问题Rotate object around world axis with tween.js的回答帮助我完成了旋转，但是没有达到我的期望。

var cubeAngle = 0;
var start = {angle: cubeAngle};
var end = {angle: cubeAngle + 90};
var tween = new TWEEN.Tween(start)
  .to(end, 300)
  .easing( TWEEN.Easing.Exponential.InOut )
  .onUpdate(function(){
   cubeAngle=this.angle;
   rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle));
   })
  .start()

旋转它，但以某种方式无法获得正确的角度。我发现，与其在整个300毫秒内将90添加到cubeAngle，不如在300毫秒内每毫秒添加90到cubeAngle，所以它旋转得更多比我需要的

经过一番尝试后，我发现有一个较小的值要添加到cubeAngle中，并有时间将其旋转90度，但是每次我重新加载页面并单击旋转时（因为我在click事件中使用），它的旋转角度都会有所不同。

我有一些screenshots来展示这一点。有时差异很小，但有时差异太大，而且由于我需要多次旋转，所以最终差异很大。因此，是什么原因造成的，以及如何以正确的方式进行操作得到准确的结果？帮助！

最佳答案

是的，是的，您两次添加了轮播...

您将“ n”从0到90进行计数，但是在每个循环中，您将n旋转一次，因此结果是：

1°n = 0旋转= 0

2°n = 1旋转= 0 + n = 1

3°n = 2旋转= 1 + n = 3

4°n = 3旋转= 3 + n = 6

5°n = 4旋转= 6 + n = 10

...

为了解决您的问题，您必须从前一轮旋转增量。

var cubeAngle = 0;
var start = {angle: cubeAngle};
var end = {angle: cubeAngle + 90};
var lastAngle=0;                                // global var
var tween = new TWEEN.Tween(start)
  .to(end, 300)
  .easing( TWEEN.Easing.Exponential.InOut )
  .onUpdate(function(){
      cubeAngle=this.angle;
      //rotate only delta
      rotateAroundWorldAxis(cube[1], new THREE.Vector3(0,1,0),degreeToRadians(cubeAngle-lastAngle));
      lastAngle=cubeAngle;                     //save last position
   })
  .start()

关于javascript - 使用Tween精确绕世界轴旋转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37215815/