0

THREE.Particle() を使用して多くのパーティクルを作成しました。私の粒子は星です。

星のように、そのうちの 1 つだけをわずかにアニメーション化したいと考えています。

私はやろうとしています:

var oneParticle = scene.children[ Math.floor(Math.random() * (500 + 1))]; oneParticle.material.map = generateSprite();

generateSprite() は、有効なキャンバスを返す関数です。

問題は、generateSprite() が唯一のパーティクルではなく、すべてのパーティクルに適用されていることです。

これを実現するには別のマテリアルを使用する必要があることに気付きましたが、アニメーション化された星ごとにマテリアルを作成する必要があり、クールではありません。

私はthree.jsが初めてで、アニメーションで1つのパーティクルのテクスチャのみを変更する簡単で親切な方法が必要だと思いますが、その方法を理解できません。

4

2 に答える 2

0

自分の問題を自分で解決する方法に気づきました。必要に応じてここに残します。

まず、パーティクル「ランタイム」のマテリアルを作成しています。

while(particleCount--) {
    var material = new THREE.ParticleBasicMaterial({ 
        map: new THREE.Texture( generateSprite() ), 
    });

    var particle = new THREE.Particle( material );
}

generateSprite() はキャンバスを返します。はい、パフォーマンスが低下することは理解していますが、私の場合は 500 個のパーティクルがあります。多すぎない、と思います。

ランダムなパーティクルを取得してコンテキストを変更する関数を作成しました。

function transformParticle() {
    var oneParticle = scene.children[ Math.floor(Math.random() * (500 + 1))];
    var ctx = oneParticle.material.map.image.getContext('2d');

    // ctx change code here
};

そして、requestAnimationFrame でこの関数を呼び出すだけで動作します。独自のマテリアルなどを作成せずに、1 つのパーティクルのテクスチャのみを変更します。

そして、 .getChildByName を使用する方が良いアイデアかもしれませんが、証拠が見つからないと思います。

于 2013-01-31T07:56:48.857 に答える
0

1 つのユニークな星に別のパーティクル システム (したがって、別のマテリアル) を使用することもできます。複数持つことはできないと思います。このようにして、他のパーティクルは引き続き効率的にレンダリングされます。

于 2013-01-30T12:47:00.817 に答える