Three.js 和 Tween.js 动画链不循环

Question

我正在尝试使用 Tween.js 库翻译 Three.js 多维数据集。

通过创建两个 tween 对象，我可以来回移动立方体：

var start_position = { x : 0.0 , y: 0.0 };
var target = { x : 3.0, y: 0.0 };

var tween_to = new TWEEN.Tween(start_position)
            .to(target, 2000);



var start_position2 = { x : 3.0 , y: 0.0 };
var target2 = { x : 0.0, y: 0.0 };

var tween_fro = new TWEEN.Tween(start_position2)
            .to(target2, 1000);



tween_to.onUpdate(onUpdate);
tween_fro.onUpdate(onUpdate);

function onUpdate()
{
  cube.position.x = this.x;
  cube.position.y = this.y;
};

tween_to.chain(tween_fro);

tween_to.start();

然后在我的动画循环中我有：

TWEEN.update();

这很有效很好。但是，如果我通过引用第二个补间中的第一个补间来完成循环，例如：

tween_to.chain(tween_fro);
tween_fro.chain(tween_to);

动画在两个极端之间跳转，没有任何插值，它只是出现在每个位置（第一个循环完成后）。

我假设我以某种方式滥用了该库，但是按照在线指南我看不出这种方法与官方 Tween.js 示例有何不同。

Answer 1

您可以使用此模式链接 Tweens：

function onUpdate() {

    cube.position.x = position.x;
    cube.position.y = position.y;

};

var position = { x : 0.0 , y: 0.0 };

var tween_to = new TWEEN.Tween( position )
    .to( { x : 10.0, y: 0.0 }, 2000 )
    .onUpdate( onUpdate );

var tween_fro = new TWEEN.Tween( position )
    .to( { x : 0.0, y: 0.0 }, 1000 )
    .onUpdate( onUpdate );

tween_to.chain( tween_fro );
tween_fro.chain( tween_to );

tween_to.start();

...

TWEEN.update();

或者，更简单地说，像这样：

var tween_to = new TWEEN.Tween( cube.position )
    .to( { x : 10.0, y: 0.0 }, 2000 );

var tween_fro = new TWEEN.Tween( cube.position )
    .to( { x : 0.0, y: 0.0 }, 1000 );

tween_to.chain( tween_fro );
tween_fro.chain( tween_to );

tween_to.start();

...

TWEEN.update();

Three.js 和 Tween.js 动画链不循环

Three.js and Tween.js chain of animations not cycling

javascript

three.js

tween.js