javascript - 将 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

AFAIK three.js PointCloud/PointCloudMaterial 粒子系统使用 gl.POINTS 绘制点。这意味着它有几个限制。

1. 您不能旋转点。

   如果您编写自定义着色器，您可以在片段着色器中旋转 UV 坐标，但如果您的图像填充该点，这将无济于事，因为在正方形内旋转正方形纹理会在旋转时剪掉边 Angular 。

2. 您不能使点大于您所使用的 GPU/驱动程序的最大点侧。

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

   正在检查 webglstats.com看起来只支持 1 像素大点的 GPU/驱动程序的数量变少了。仍然有大约 5% 的机器仅支持 63 像素和更小的点，如果您在点场中飞行，这应该只是一个问题。

3. 你只能有方点。

   如果你想要像 Spark 一样又长又细的东西，你就不能使用矩形点。

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