Three.jsとTween.js、回転した連鎖アニメーションが機能しない

Question

キューブを最初にカメラに向かって動かし、次に左に曲げ、次に画面の右側に移動しようとしています。私は、カメが前進し回転する迷路を作っています。私は、アニメーションにtweenjを使用したいと考えています。

フィドルがここhttps://jsfiddle.net/edapx/o6mvg0d5/1/

でご覧のように、最初の2つのアニメーションが実行されますが、予想通り、最後の一つは、キューブを移動しません。私はこのようなアニメーションを連鎖しています：

function testChained(){ 
    var radians = 90 * THREE.Math.DEG2RAD; 

    var pos_copy_a = new THREE.Vector3().copy(mesh.position); 
    var target_a = pos_copy_a.add(new THREE.Vector3(0.0, 0.0, 50.0)); 
    var rotationMatrix_a = new THREE.Matrix4().makeRotationY(mesh.rotation.y); 
    target_a.applyMatrix4(rotationMatrix_a); 
    var a = new TWEEN.Tween(mesh.position).to(target_a, 900); 

    var target_b = {y:mesh.rotation.y + radians}; 
    var b = new TWEEN.Tween(mesh.rotation).to(target_b, 900); 

    var pos_copy_c = new THREE.Vector3().copy(mesh.position); 
    var target_c = pos_copy_c.add(new THREE.Vector3(0.0, 0.0, 50.0)); 
    var rotationMatrix_c = new THREE.Matrix4().makeRotationY(mesh.rotation.y); 
    target_c.applyMatrix4(rotationMatrix_c); 
    var c = new TWEEN.Tween(mesh.position).to(target_c, 900); 

    a.chain(b); 
    b.chain(c); 
    a.start(); 
}; 

私はtween.jsを間違って使用していますか？

Answer 1

これは、すべてのアニメーションが開始する前にtarget_cに設定されているためです。したがって、target_cはtarget_aと同じです。アニメーションcが始まると、メッシュの位置は0 0 50ですが、target_cは0 0 50です。したがって、アニメーションaが完了した後にtarget_cを設定する必要があります。アニメーションCは前のものの「結果」に依存していると思います。 https://jsfiddle.net/327bcLgp/

EDITED質問

と呼ばれている私はそれを探しています：

はjsfiddleでは、私はちょうどそれを動作させるためにアニメーションbの完全なコールバックにアニメーションcのインスタンス化を包ん相対値のアニメーションです。 https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md#relative-values回転を重ねるときに機能しますが、回転と平行移動を混在させるのは難しいです。ここではまだhttps://jsfiddle.net/edapx/o6mvg0d5/5/

EDITED回答

に動作しません更新フィドルそれは単なる文字列（String(distance_a.x)）ではありません、あなたはそれが相対作るためにプラス記号を前に付けする必要があります。'+' + distance_a.x;

そしてベクトルを回転させるのにmesh.rotation.yを使用しません。それは私が上で説明したのと同じです。 rotationMatrix_cを設定すると、mesh.rotation.yはまだ0になります。代わりに、修正値を使用します。

var radians = 90 * THREE.Math.DEG2RAD; 
... 
var rotationMatrix_c = new THREE.Matrix4().makeRotationY(radians); 
var distance_c = new THREE.Vector3(0.0, 0.0, 50.0); 
distance_c.applyMatrix4(rotationMatrix_c); 
var target_c = { 
    x: '+' + distance_c.x, 
    y: '+' + distance_c.y, 
    z: '+' + distance_c.z 
}; 

https://jsfiddle.net/o6mvg0d5/6/

あなたはより多くの回転を持っている場合は、例えば、ラジアン値を合計する必要がありますradians += 90 * THREE.Math.DEG2RAD;