Three.js和Tween.js，與旋轉鏈接的動畫不起作用

Question

我正在嘗試將一個立方體先移到相機，然後左轉，然後向前移動到屏幕的右側。我正在建造一個烏龜，它會向前移動並旋轉，我想使用tweenjs來製作動畫。

小提琴是這裏https://jsfiddle.net/edapx/o6mvg0d5/1/

正如你看到的，前兩個動畫被執行，但如預期的最後一個不動的立方體。我鏈接動畫這樣的：

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依賴於以前的「結果」，我猜，鏈接並不那麼容易。

在的jsfiddle，我只是剛剛結束的動畫C的實例成動畫B的完整的回調，使其工作：https://jsfiddle.net/327bcLgp/

EDITED問題

我正在尋找它被稱爲是具有相對值的動畫。 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;