Question

我很困惑。

我制作了一组10个精灵并将它们添加到名为fireworkGroup的THREE.Object3D（）中。我有另一个名为explode的Object3D。补间循环通过精灵将它们从初始位置更改为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();
    }

补间正在将所有精灵从其起始位置移动到相同的结束位置。所以我认为这可能是因为＆＃34; tweenLaunch＆＃34;每次渲染补间时都会被不同的explode.position覆盖，所以我只看到循环中创建的最后一个。当我刷新页面时，它们都会移动到不同的位置，与Math.random（）一致。

但是为什么所有精灵都会转向爆炸？如果＆＃34; tweenLaunch＆＃34;正在被覆盖，为什么它不会只移动最后一个精灵？

是否有可能在其中有一个补间的循环也会发生变化？

非常感谢。

Answer 1

我通过阅读有关Stackoverflow问题和答案的主题，设法找出问题所在，通过stemkoski查看一个伟大的粒子示例然后反复试验。

视图源：http://stemkoski.github.io/Three.js/Particles.html

我使用console.log查看我使用的explode.position作为补间中的第二个位置。它没有保存我想要的值（每个循环上有一个不同的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 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();
    }

可能有一种更优雅的方式来执行此操作，我将尽可能清理代码，但这确实有效。

是否可以循环遍历three.js中的sprite组，其中补间结束于每个精灵的不同位置？

1 个答案: