threejs/tween.js中如何让物体一步步移动

Question

我想让我的圆柱体（代码中的介子）逐个移动到我创建的板上的对象。我有这个代码：

a : 开始
索引：对象

attachEvent(_this, index,a) {
if(index>=a){

_this.domEvents.addEventListener(_this.cases[index], 'click',        
function(event) {
for ( var i = a; i <= index; i++) {
  _this.stepByStep(_this,i)
}
}, false)
}else{

_this.domEvents.addEventListener(_this.cases[index], 'click',        
function(event) {
//nothing now
}, false)
}

}

stepByStep(_this,i)
{
_this.tween = new TWEEN.Tween(this.pions.position)
        .to({
        x:  _this.cases[i].position.x,
        y: _this.cases[i].position.y,
        z: 5},1000)
        .start();
}

当我运行我的代码时，我不知道为什么，但介子直接进入了对象。

Answer 1

我不是 Tween.js 用户（TweenJS 在这里！），但我怀疑它的用法相同。

您在每次迭代的 for 循环中创建新补间，而不是附加新位置。它基本上是创建一堆同时开始并运行并发的独立补间，但都影响同一个对象。很有可能最后一个补间被应用。

编辑显然这是 how Tween.js works? Only a single to() call can be used for a tween. My original solution works for TweenJS，但不是 Tween.js，您的示例使用的是：

原始解决方案仅适用于 CREATEJS/TWEENJS:

创建 Tween 一次，并在循环中追加 to() 次调用：

var tween = new createjs.Tween(this.pions.position);
for ( var i = a; i <= index; i++) {
  _this.stepByStep(tween, _this.cases[i].position); // Arguments changed!
}

function stepByStep(tween, position)
{
    tween.to({
        x: position.x,
        y: position.y,
        z: 5
    }, 1000);
}

这会生成一个补间，并为每个位置添加 to() 次调用。我也稍微简化了参数以使函数更简洁（传递整个范围有点混乱）。你可以随心所欲地清理它。

更新的解决方案

使用Tween.js，似乎有必要为每个新动画创建一个新的补间，但不是一次性创建它们，而是必须chain，并且只开始第一个补间。

这是一些伪代码：

var firstTween = new Tween.Tween(obj)
var earlierTween = firstTween;
(loop) {
  var tween = new TWEEN.Tween(obj);
  tween.to({params});
  earlierTween.chain(tween);
  earlierTween = tween;
}
firstTween.start();

这是我快速整理的 fiddle。绘图层使用EaselJS，但补间使用Tween.js。 https://jsfiddle.net/0mh6kj5y/8/

我还注意到您在函数中引用了 this.pions，而其他所有内容都使用 _this 作为范围。

希望对您有所帮助！

threejs/tween.js中如何让物体一步步移动

How to make a object move step by step in threejs/tween.js

javascript

tween

three.js