THREE.js 粒子系统

时间：2022-01-22 06:33:37

经常看到这样一些场景：漫天飞舞的雪花、夜晚草丛中点点萤光、小河上下起的绵绵细雨…
这些浪漫？？的效果都可以用粒子系统来实现，粒子系统用THREE.js实现就是通过Points或者Sprite类来实现的啦。

一、Points

A class for displaying points. The points are rendered by the WebGLRenderer using gl.POINTS.

所以Points类就是通过 gl.POINTS来渲染的。

构造函数

Points( geometry : Geometry, material : Material )

各参数说明：
geometry — (optional) an instance of Geometry or BufferGeometry. Default is a new BufferGeometry.
material — (optional) a Material. Default is a new PointsMaterial with a random color.

  • Geometry 和BufferGeometry的说明如下：

BufferGeometry

An efficient representation of mesh, line, or point geometry. Includes vertex positions, face indices, normals, colors, UVs, and custom attributes within buffers, reducing the cost of passing all this data to the GPU.

Geometry

Geometry is a user-friendly alternative to BufferGeometry. Geometries store attributes (vertex positions, faces, colors, etc.) using objects like Vector3 or Color that are easier to read and edit, but less efficient than typed arrays.

也就是说，Geometry的顶点位置，缩放，旋转角，颜色，法线信息等都是保存在特定的类里面，比如顶点位置使用Vector3，颜色信息使用Color。而BufferGeometry类的都是使用数组存储的，并且缓存在了内存缓冲区里，减低了对GPU的消耗。
THREE.js中基本上是每类Geometry都有一个BufferGeometry与之对应，比如我们平时使用的BoxGeometry和BoxBufferGeometry等。
Geometry和BufferGeometry的特点决定了他们各自的使用场景：Geometry使用类来管理自身信息，便于操作，用来创建经常变化的物体；BufferGeometry由于使用数组来管理，如果需要操作，必须去除其原始信息，很难操作，而且buffer几何体的信息被缓存在缓冲区中，所以Buffer几何体适用于创建一旦创建就不需要修改的物体。

以上内容参考了这篇博客

  • 然后说说PointsMaterial

PointsMaterial

The default material used by Points.

简单明了，就是Points类使用的材质。
PointsMaterial的构造函数传入的参数可以是所有 Material的属性，没有扩展。
通常粒子系统用到的属性有size, color, map, transparent等。

使用示例

  • 代码

    这里给出一个官网的示例，效果是一个星空图

//This will add a starfield to the background of a scene
var starsGeometry = new THREE.Geometry();

for ( var i = 0; i < 10000; i ++ ) {

    var star = new THREE.Vector3();
    star.x = THREE.Math.randFloatSpread( 2000 );
    star.y = THREE.Math.randFloatSpread( 2000 );
    star.z = THREE.Math.randFloatSpread( 2000 );

    starsGeometry.vertices.push( star );

}

var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } );

var starField = new THREE.Points( starsGeometry, starsMaterial );

scene.add( starField );
  • 运行效果
    THREE.js 粒子系统

使用贴图等还可以创建雪花的效果：https://threejs.org/examples/#webgl_points_sprites

想了解关于PointsMaterial的更多信息可以看官网的介绍。

二、Sprite

官网的介绍：Sprite就是永远朝向照相机的一个平面，不能产生阴影。

Sprite
A sprite is a plane that always faces towards the camera, generally with a partially transparent texture applied.

Sprites do not cast shadows

构造函数

Sprite( material : Material )

参数说明如下：

material - (optional) an instance of SpriteMaterial. Default is a white SpriteMaterial.

SpriteMaterial的说明也跟PointsMaterial一样简单明了，是Sprite使用的一种材质。其构造函数传入的参数也可以是所有 Material的属性。

使用示例

  • 代码
var material = new THREE.SpriteMaterial();

for (var x = -5; x <= 5; x++) {

    for (var y = -5; y <= 5; y++) {

        var sprite = new THREE.Sprite(material);

        sprite.position.set(x * 10, y * 10, 0);

        scene.add(sprite);

     }
}
  • 运行结果

THREE.js 粒子系统

想了解关于SpriteMaterial的更多信息可以看官网的介绍。

标签：

相关文章