使用吐温围绕世界坐标轴的精确旋转

Question

我一直在尝试围绕世界坐标轴旋转立方体一段时间，但它没有给出准确的结果。回答我的最后一个问题Rotate object around world axis with tween.js帮助我完成了旋转，但并不像我那样expecting.I正在使用

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() 

将它旋转，但不知它没有得到正确的angles.What我发现的是，而不是在全300毫秒增加90 cubeAngle，它是增加90为每毫秒cubeAngle持续时间为300毫秒，旋转的次数比我需要的要多得多。

经过一些命中和尝试，我发现一个小值的比赛添加到cubeAngle和时间旋转90度，但每次我重新加载页面并单击旋转（因为我使用单击事件）它旋转不同几度。

我有一些screenshots来显示这一点。有时，差异很小，但有时它是太明显，因为我需要多次旋转，所以最后它变化多端。所以，这是什么原因造成这种情况，以及如何做到这一点是正确的如何获得准确的结果？帮助！

Answer 1

是的，是真实的，你加旋转两次......

你算“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()