Three.jsオブジェクトがターゲットに移動

Question

私はターゲットに移動するオブジェクトを持っています。問題は、x位置がz位置より速いか、またはz位置がx位置よりも速いことです。

zポジションの移動に時間がかかる場合は、オブジェクトがxポジションでスローダウンすることはできますか？

アニメーション機能での私のコード：

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数学utilsのを使用すると、あなたも、すべてを一度にこれを行うことができます。

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のようなアニメーションライブラリを見たい場合があります。彼らはこれをかなり快適に扱うことができます。