应用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

Answer 1

我知道three.js PointCloud/PointCloudMaterial粒子系统使用gl.POINTS来绘制点。这意味着它有一些局限性。

1. 不能旋转点

   如果你编写一个自定义着色器，你可以旋转片段着色器中的UV坐标，但如果你的图像填充点，这将没有帮助，因为在正方形内部旋转正方形纹理会在旋转时剪切角。

2. 你不能让点大于你所在的GPU/驱动程序的最大点边。

   WebGL只要求最大尺寸= 1.0，这意味着有gpu/驱动程序只支持1像素大的点。

   检查webglstats.com，看起来只支持1像素大点的gpu/驱动程序的数量已经变小了。仍然有大约5%的机器只支持63像素或更小的点，这应该只有在你飞过点场时才会出现问题。

3. 只能有方点。

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

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