Точное вращение вокруг оси мира с помощью Tween

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 я обнаружил, что вместо добавления 90 к cubeAngle в полной мере 300 миллисекунд, это добавляет 90 к cubeAngle каждые миллисекунды длительностью 300 миллисекунд, и поэтому он вращается намного больше, чем мне нужно.

После некоторого удара и попытки я нашел совпадение небольшого значения, чтобы добавить к cubeAngle и время, чтобы повернуть его на 90 градусов, но каждый раз, когда я перезагружаю страницу и нажимаю для поворота (как я использую событие click), она вращается по-разному на несколько градусов.

У меня есть screenshots, чтобы показать это. Иногда разница небольшая, но иногда она слишком заметна, и поскольку мне нужно несколько оборотов, поэтому в конце она меняет много. Так, что вызывает это и как это сделать правильно способ получить точный результат?

Answer 1

Да, верно, вы добавляете вращение в два раза ...

считать «п» от 0 до 90, но в каждом цикле вы поворачиваете на п, так что результат:

1 ° п = 0 вращение = 0

2 ° п = 1 оборот = 0 + п = 1

3 ° п = 2 вращения = 1 + п = 3

4 ° п = 3 вращения = 3 + n = 6

5 ° п = 4 вращения = 6 + п = 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()