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 the three.js PointCloud / PointCloudMaterial粒子系统使用gl.POINTS绘制点。这意味着它有几个局限性。

您无法旋转这些点。

如果您编写自定义着色器，则可以旋转片段着色器中的UV坐标，但如果图像填充该点，则无效，因为在方块内旋转方形纹理会在旋转时剪切角落。
您不能使点数大于您所使用的GPU /驱动程序的最大点数。

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

检查webglstats.com，看起来只支持1个像素大点的GPU /驱动程序数量变小了。仍然有大约5％的机器只支持63像素和更小的点，如果你飞过点场，这应该只是一个问题。
你只能有方格点。

如果你想要像火花一样长而薄的东西，就不能有矩形点。

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

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

1 个答案: