three.js中不能改变一个粒子的材质贴图答案

【问题标题】：Can't change the material map of one particle in three.jsthree.js中不能改变一个粒子的材质贴图
【发布时间】：2013-01-31 15:56:48
【问题描述】：

我使用 THREE.Particle() 创建了很多粒子。我的粒子是星星。

我只希望其中一个像星星一样稍微动起来。

我正在努力：

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

generateSprite() 是一个返回有效画布的函数。

问题是 generateSprite() 被应用于每个粒子，而不是唯一一个。

我意识到我必须使用另一种材质来实现它，但这意味着我应该为每个动画明星创建一个材质，这并不酷。

我是 three.js 的新手，我假设必须有一种简单、友好的方法来仅通过动画更改一个粒子的纹理，但不明白如何。

【问题讨论】：

标签： three.js

【解决方案1】：

也许您可以为一颗独特的恒星使用另一种粒子系统（因此，另一种材料）。我不认为你可以有多个。这样其他粒子仍然可以有效地渲染。

【讨论】：

【解决方案2】：

我已经意识到如何自己解决我的问题。需要时会留在这里。

首先，我正在为粒子“运行时”创建材质：

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 中调用这个函数，它就可以工作了——只改变一个粒子的纹理而不创建独特的材质等。

我认为，使用 .getChildByName 可能是一个更好的主意，但找不到任何证据。

【讨论】：

如果它解决了您的原始问题，请不要忘记接受您自己的答案！