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依赖于＆＃34;结果＆＃34;我想，之前的那些，链接就像那样容易。

在jsfiddle中，我只是将动画c的实例化包装到动画b的完整回调中以使其工作：https://jsfiddle.net/327bcLgp/

已编辑问题

我正在寻找它的是具有相对值的动画。 https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md#relative-values它在堆积旋转时起作用，但混合旋转和平移是很棘手的。这里有一个更新的小提琴仍然不起作用https://jsfiddle.net/edapx/o6mvg0d5/5/

已编辑答案

它不仅仅是一个字符串（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;

Three.js和Tween.js，带旋转的链式动画不起作用

1 个答案: