对粒子应用2D方向 - three.js

Question

第一次使用three.js，我正在做一个非常简单的粒子动画，其中我映射了4种不同的纹理。目前一切都按预期工作，但是我无法弄清楚如何旋转粒子，以便它们以随机方向（倒立、侧着等）呈现。任何帮助将不胜感激！

您可以在此处查看我的进度：http://development.shapes.divshot.io/particles.html

以下是相关代码：

            sprite1 = THREE.ImageUtils.loadTexture( "sprite1.png" );
            sprite2 = THREE.ImageUtils.loadTexture( "sprite2.png" );
            sprite3 = THREE.ImageUtils.loadTexture( "sprite3.png" );
            sprite4 = THREE.ImageUtils.loadTexture( "sprite4.png" );

            parameters = [ sprite1, sprite2, sprite3, sprite4];

            for ( i = 0; i < parameters.length; i ++ ) {

                sprite = parameters[i];

                materials[i] = new THREE.PointCloudMaterial( { size: 45, map: sprite, depthTest: false, transparent : true} );


                particles = new THREE.PointCloud( geometry, materials[i] );

                particles.rotation.x = Math.random() * 60;
                particles.rotation.y = Math.random() * 60;
                particles.rotation.z = Math.random() * 60;

                scene.add( particles );

            }

使用 three.js r71

- Steph

---

你想做的事情绝对可以使用答案中的方法（1）来实现。这将需要使用“ShaderMaterial”。你的纹理图片需要居中并包含在一个圆盘内，背景要透明。这样，在片段着色器中旋转UV坐标时就不会出现任何伪影。 - WestLangley

Answer 1

据我所知，three.js的PointCloud/PointCloudMaterial粒子系统使用gl.POINTS来绘制点。这意味着它有几个限制。

1. 你无法旋转点。

   如果你编写一个自定义着色器，可以在片段着色器中旋转UV坐标，但如果你的图像填充了点，那么将一个正方形纹理旋转在正方形内部会剪裁角落，这是无济于事的。

2. 你不能使点比你所在的GPU/驱动程序的最大点大小更大。

   WebGL只需要max size = 1.0，这意味着有些GPU/驱动程序只支持1像素大小的点。

   查看webglstats.com，似乎只支持1像素大小的点的GPU/驱动程序数量已经变少了。仍然有约5%的机器只支持63像素及以下大小的点，这只有在你飞过一个点场时才会成问题。

3. 你只能拥有正方形的点。

   如果你想要长而细的东西，比如火花，就不能有矩形点。

一种解决方案是制作自己的粒子系统，使用四边形，可以旋转它们的顶点，并在多个方向上缩放它们。这个例子完全在GPU上运行。不幸的是，它不是基于three.js的。

- gman