Three.js Objekt bewegt sich zum Ziel

Question

Ich habe ein Objekt, das zu einem Ziel bewegt. Das Problem ist, dass die x-Position schneller ist als die z-Position oder die z-Position schneller ist als die x-Position.

Was kann ich tun, dass mein Objekt für die x-Position langsamer wird, wenn die z-Position mehr Zeit zum Verschieben benötigt?

Mein Code in der Animationsfunktion:

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

würde ich empfehlen, den aktuellen Wert als absoluten Wert zu berechnen, anstatt schrittweise von. Was Sie tun, im Grunde so etwas wie diese:

x = xLast + constantValue; 

Stattdessen könnten Sie dies tun, ohne den letzten Wert zu benötigen (wird diese lineare Interpolation genannt):

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

Der Fortschritt Wert ist in diesem Fall ein Wert von 0 (Animationsstart) bis 1 (Animationsende).

Wenn Sie Ihre Animationen so schreiben, können Sie die Dauer für beide Teile auf den gleichen Wert einstellen. die three.js Mathe utils verwenden, können Sie dies auch tun alles auf einmal:

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

Auf diese Weise finden Sie alle Komponenten der Position bewegen sich mit einer konstanten Geschwindigkeit, die am Ziel zur gleichen Zeit genau ankommt.

Vielleicht möchten Sie sich Animationsbibliotheken wie tween.js ansehen. Sie können viel davon ziemlich bequem behandeln.