Объект tr.js, перемещающийся к цели

Question

У меня есть объект, который перемещается к цели. Проблема в том, что положение x быстрее, чем положение z, или положение z быстрее, чем положение x.

Что я могу сделать, чтобы мой объект замедлялся для позиции x, если для позиции z требуется больше времени для перемещения?

Мой код в функции анимации:

var distanceX = objectX - targetX; 
var distanceZ = objectZ - targetZ; 

if(distanceX < 0) { 
    visitor.translateX(0.05); 
}else { 
    if(distanceX > 0) { 
     visitor.translateX(-0.05); 
    } 
} 

if(distanceZ < 0) { 
    visitor.translateZ(0.05); 
}else{ 
    if(distanceZ > 0) { 
     visitor.translateZ(-0.05); 
    } 
} 

Answer 1

Я рекомендовал бы, чтобы вычислить текущее значение как абсолютное значение, а не постепенно. То, что вы делаете, в основном что-то вроде этого:

x = xLast + constantValue; 

Вместо этого, вы можете сделать это без необходимости последнего значения (это называется линейная интерполяция):

progress = Math.min((Date.now() - startTime)/duration, 1); 
x = xStart + progress * (xEnd - xStart); 

Значение прогресса в этом случае значение от 0 (начало анимации) до 1 (конец анимации).

Если вы пишете свои анимации следующим образом, вы можете просто установить длительность для обеих частей того же значения. Используя three.js математические утилиты вы можете даже сделать это все сразу:

var end = new THREE.Vector3(1, 0, 2); 
var start = new THREE.Vector3(2, 0, -1); 

// in animation-loop 
var tmp = new THREE.Vector3(); 
var progress = Math.min((Date.now() - startTime)/duration, 1); 

// tmp = progress * (end - start) 
tmp.copy(end).sub(start).multiplyScalar(progress);   
object.position.copy(from).add(tmp); 

Таким образом, вы будете иметь все компоненты позиции двигаться с постоянной скоростью, которая прибывает в пункт назначения точно в то же самое время.

Возможно, вам захочется взглянуть на анимационные библиотеки, такие как tween.js. Они могут справиться с этим довольно комфортно.