使用吐溫圍繞世界座標軸的精確旋轉

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