是否可以在three.js中循环通过一个sprite组，每个sprite的tween都以不同的位置结束？

我很困惑

我制作了一组10个精灵，并将它们添加到名为fireworkGroup的3.Object3D（）中。我有另一个叫做爆炸的Object3D。tween通过精灵循环，将精灵从初始位置更改为explode.position

for ( var i = 0; i < fireworkGroup.children.length; i ++ ) 
    {
        explode.position.x =(Math.random() - 0.5)*4;
        explode.position.y =4;
        explode.position.z =2;

        var tweenLaunch = new TWEEN.Tween(fireworkGroup.children[i].position).to(explode.position, 4000).easing( TWEEN.Easing.Quartic.In);
        tweenLaunch.start();
    }

for（var i=0；i

tween将所有精灵从其开始位置移动到相同的结束位置。所以我想这可能是因为每次渲染tween时，“tweelaunch”都会被不同的explode.position覆盖，所以我只看到循环中创建的最后一个。当我刷新页面时，它们都会移动到不同的位置，这与Math.random（）一致

但是为什么所有的精灵都移动到爆炸位置呢？如果“tweenLaunch”被覆盖，那么为什么它不只移动最后一个精灵

有没有可能有一个中间有吐温的循环也会发生变化

---

非常感谢。

我通过阅读Stackoverflow问答的主题，看看stemkoski的一个伟大粒子示例，然后尝试和错误，找到了问题所在

查看来源：

我使用console.log查看explode.position，它是我在tween中使用的第二个位置。它没有保存我想要的值（每个循环都有不同的Math.random）

所以我创建了fireworkAttributes：

fireworkAttributes = { startPosition: [], explodePosition: [], nextPosition: [] };

然后在创建精灵的函数中克隆精灵位置，使用：

fireworkAttributes.explodePosition.push( sprite.position.clone() );

然后在它自己的函数中循环：

for (var i = 0; i < fireworkGroup.children.length; i++) 
    {
        fireworkAttributes.explodePosition[i].x = (Math.random() - 0.5)*4;
        fireworkAttributes.explodePosition[i].y = 4;
        fireworkAttributes.explodePosition[i].z = 2;
    }   

for（var i=0；i

然后将原始问题中的代码更改为：

for ( var a = 0; a < fireworkGroup.children.length; a ++ ) 
    {
        //need to use this new object as tweening to fireworkAttributes.explodePosition[a] does not work
        explodeSite.position = fireworkAttributes.explodePosition[a];

        var tweenLaunch = new TWEEN.Tween(fireworkGroup.children[a].position).to(explodeSite.position, 4000).easing( TWEEN.Easing.Quartic.In);
        tweenLaunch.start();
    }

for（var a=0；a

也许有一种更优雅的方法可以做到这一点，我将尽可能地清理代码，但这确实有效