在 Three.js（不是 ParticleSystem）中更改 Particle 对象的不透明度？答案

【问题标题】：Change the opacity of a Particle object in Three.js (NOT ParticleSystem)?在 Three.js（不是 ParticleSystem）中更改 Particle 对象的不透明度？
【发布时间】：2013-12-19 08:08:17
【问题描述】：

我在 Three.JS 中使用CanvasRenderer和Particle。我正在使用这种方法生成一些随机粒子：

texture = THREE.ImageUtils.loadTexture("img.png");

material = new THREE.ParticleBasicMaterial({

    map : texture,
    transparent : true,

});

for (var i = 0; i < pointCount; i++) {

    var particle = new THREE.Particle(material);

    particle.position.x = Math.random() * (max - min) + min;
    particle.position.y = Math.random() * (max - min) + min;
    particle.position.z = Math.random() * (max - min) + min;

    // Set the size of the particle
    particle.scale.x = particle.scale.y = particle.scale.z =  Math.floor(Math.random() * 6) + 2;

    particles.push(particle);
    scatterPlot.add(particle);

}

我希望（如果可能）能够更改单个 Particles 的不透明度，因为我在绘图中使用透明度作为维度（即粒子的透明度反映了变量的大小）。我知道我可以使用particle.material.opacity，但这会改变所有粒子的不透明度。我试过particles[i].material.opacity但得到了相同的结果。

当然，一种可能性是拥有一系列具有不同不透明度的材料。但我不确定是否有更简单的方法可以做到这一点？

非常感谢！

【问题讨论】：

这段代码看起来很旧。你用的是什么三个.js 版本？在three.js 示例中搜索Sprite、SpriteCanvasMaterial、SpriteMaterial。
Particle 已弃用。现在是Sprite。 ParticleBasicMaterial 已弃用。将SpriteMaterial 与CanvasRenderer 一起使用。
我选择Particle 的原因是因为它看起来不像ParticleSystem 或Sprite 可以与RayCaster 一起使用。这有点破坏交易，因为我需要能够检测到交叉点。我会看看Sprite 现在是否支持光线投射。感谢您的信息！
对THREE.Sprite 和SpriteMaterial 进行了更改，似乎一切正常。虽然 ThreeJS 页面上的 Canvas 演示仍然有使用 Particle 的示例。感谢您指出此信息，WestLangley。一如既往，非常感谢！

标签： three.js

【解决方案1】：

我想我可能已经想通了——而且比我想象的要简单。它至少似乎对我有用。我将material 声明移到for 循环中。我认为这会为每个Particle 生成一个不同的ParticleBasicMaterial，但我想这没关系。

然后我可以使用particles[i].material 访问单个Particle'smaterial，这允许我更改特定粒子的不透明度。

这是我更新的代码：

texture = THREE.ImageUtils.loadTexture("img.png");

for (var i = 0; i < pointCount; i++) {

    material = new THREE.ParticleBasicMaterial({

        map : texture,
        transparent : true,

    });

    var particle = new THREE.Particle(material);

    particle.position.x = Math.random() * (max - min) + min;
    particle.position.y = Math.random() * (max - min) + min;
    particle.position.z = Math.random() * (max - min) + min;

    // Set the size of the particle
    particle.scale.x = particle.scale.y = particle.scale.z =  Math.floor(Math.random() * 6) + 2;

    particles.push(particle);
    scatterPlot.add(particle);

}

// Example opacity change
particles[0].material.opacity = 0.5;

如果有人有任何其他建议，我将不胜感激。但至少这似乎给了我现在想要的行为。

【讨论】：