Three.js中粒子系统的对象和材质？

Question

我已经在Three.js中使用粒子系统几周了。我开始使用Object3D并添加我自己的Vector3和MeshBasicMaterial（以及其他材料，如Phong和Lambert），然后有人将我转到内置{{1} } object和ParticleSystem因为它可以被标记为排序并且可能具有其他优点。但是，现在通过一些进一步的研究，我发现这些可能已被弃用（BasicParticleMaterial，ParticleSystem），现在可能是PointCloud和PointCloudMaterial。一路走来，我发现BasicParticleMaterial只支持所有粒子的一个纹理，我需要使用多个纹理，所以我的问题是：

1. Three.js中粒子系统的当前对象和材质是什么？

2. 它是否支持多个纹理（粒子的各种图像）？

3. 如果当前的粒子系统不支持多个纹理，我会考虑使用自定义材质和几何体返回BasicParticleMaterial。我可能会错过更合适的选择吗？

更新

我的具体任务是制作数百个抽象数字，每个数字由多个粒子云（10+）组成，每个粒子云由400多个粒子组成。粒子是不同的手绘草图标记，因此当每个云中存在许多变化的标记时，整个图形看起来是手绘的。所有标记都从中心轻微脉动，好像被微风吹过一样。

我正在为这项任务寻找最有效的材料和对象，它也可以处理多个纹理，因此粒子可以是不同的阴影标记。例如，下面是一个单粒子云（每个抽象图形将由各种不同形状的云组成），但是这个云只由一种阴影标记组成，我想混合各种标记作为粒子。

Answer 1

你的代码应该做这样的事情（你可能不会使用画布，所以你必须使用纹理加载器，并使用回调只在它们被加载时添加精灵。如果您看到的只是黑色精灵，也会设置texture.needsUpdate = true;。

var texture1 = new THREE.Texture( canvas1 );
var texture2 = new THREE.Texture( canvas2 );
var texture3 = new THREE.Texture( canvas3 );

var material1 = new THREE.SpriteMaterial({ map: texture1 });
var material2 = new THREE.SpriteMaterial({ map: texture2 });
var material3 = new THREE.SpriteMaterial({ map: texture3 });

var sprite1, sprite2, sprite3;

var particleCloud1 = new THREE.Object3D();
for ( var i = 0; i < 100; i += 1 ) {

   sprite1 = new THREE.Sprite( material1 );
   // set position etc
   particleCloud.add( sprite1 );

   sprite2 = new THREE.Sprite( material2 );
   // set position etc
   particleCloud.add( sprite2 );

   // and on ...
}
scene.add( particleCloud1 );

这将分享所有精灵的纹理和材质。你应该能够有至少数百个，可能有数千个，虽然动画它们在性能方面可能非常昂贵（据我所知，没有办法解决这个问题）。

您甚至可以在单个纹理图集中使用各种纹理，并使用参数texture.offset.x，texture.offset.y，texture.repeat.x和texture.repeat.y从中获取正确的纹理地图集。虽然考虑到你的使用案例，我认为你不会因为这样做而获得很多收益。