一、粒子、粒子系统和ParticleBasicMaterial

1.粒子（Particle）

我们可以使用THREE.Particle(material)构造函数手工创建粒子。唯一需要传入的参数是一个材质。该材质可以是Patricle，也可以是ParticleProgramMaterial。

THREE.Mesh的大部分属性都可以用于THREE.Particle。你可以用Position属性来定位，用scale属性来缩放，用translate属性来做相对位移。

对于这种创建粒子的方法，我们使用的渲染器是CanvasRenderer，而不是我们之前使用的WebGLRenderer。原因是创建粒子并直接添加到场景中，只对CanvasRenderer有效。

2.粒子系统（ParticleSystem）

除非使用CanvasRenderer类，否则你就需要用ParticleSystem类来显示粒子。ParticleSystem类的构造函数接受两个参数：一个几何体和一个材质。材质用来给粒子上色和添加纹理，而几何体则是用来指定将粒子放在哪里。每个顶点，即定义几何体的各个点，将会以粒子的形态展示出来。

3.ParticleBasicMaterial

下表是ParticleBasicMaterial对象中所有课设置属性的说明：

名称

描述

color

ParticleSystem对象中所有粒子的颜色。如果vertexColors属性设为true，而且也指定了几何体的colors属性，那么该属性就会被忽略。默认值是0xffffff

map

通过这个属性可以在粒子上应用某种材质

size

指定粒子的大小，默认是1

sizeAnnutation

如果设为false，那么所有粒子都将拥有相同的颜色。如果设为true，而且几何体的colors数组也有值，那就使用颜色数组中的值，默认是false

vertexColors

通常情况下ParticleSystem里的所有粒子都具有相同的颜色。如果该属性设为true，而且几何体的colors数组也有值，那就使用颜色数组中的值，默认是false

opacity

跟transparent属性一起使用，用来设置粒子的透明度。默认是1（不透明）

transparent

如果设为true，那么粒子在渲染时会根据opacity属性的值来确定其透明度。默认是false

blending

渲染粒子时的融合模式

fog

粒子是否受场景雾化效果的影响。默认是true

 

二、使用HTML5画布格式化粒子

1.在CanvasRenderer类里使用HTML5画布

通过ParticleCanvasMaterial，你可以将HTML5画布的输出结果作为粒子的纹理。该材质是特别为CanvasRenderer创建的，而且只能用于这种渲染器。我们先来看看该材质可以设置的属性：

名称

描述

color

粒子的颜色。根据特定的融合模式，可以影响画布的颜色

program

这是一个以画布上下文为参数的函数。该函数在渲染粒子时调用。调用该函数将在画布上下文中产生一个输出，该输出将会以粒子的形态显示出来

opacity

粒子的透明度。默认是1，不透明

transparent

粒子是否透明。同opacity属性一起使用

blending

融合模式。

2.在WebGLRenderer中使用HTML5画布

要使用WebGLRenderer类，只能使用ParticleBasicMaterial来达到同样的目的。ParticleBasicMaterial有一个map（贴图）属性。通过map属性我们可以为粒子加载纹理。该纹理在Three.js中也可以是HTML5画布的输出。

 

三、使用纹理格式化粒子

这里我们介绍一种更直接的、使用图片格式化粒子的方法。在Three.js中可以使用THREE.ImageUtils.loadTexture()方法加载外部的图片。

 

四、使用精灵（THREE.Sprite）

THREE.Sprite类可以用于如下两种目的：

  • 创建一个可以基于屏幕坐标移动、定位和缩放的对象。你可以用它来创建一个平视显示器（Head-Up display，简称HUD），就像在三维场景上蒙了一层。
  • 创建一个类似粒子的、可以在三维空间移动的对象，类似使用CanvasRenderer的THREE.Particle。三维场景中的精灵有时也称作广告牌。所谓广告牌指的是精灵总是面向镜头，就像高速路上的广告牌总是面向司机。

创建一个sprite对象我们需要为它传入材质，如下所示：

var spriteMaterial = new THREE.SpriteMaterial({
    opacity:opacity,
    color:color,
    transparent:transparent,
    useScreenCoordinates:true,
    map:getTexture()
});

var sprite = new THREE.Sprite(spriteMaterial);

 我们来看一下SpriteMaterial的属性：

名称

描述

Color

粒子的颜色

Map

精灵所用纹理

sizeAnnutation

如果设为false，那么距离镜头的远近就不会影响精灵的大小。默认是true

opacity

设置精灵的透明度。默认是1（不透明）

blending 

渲染精灵时所用的融合模式

fog

精灵是否受场景雾化效果的影响。默认是true

useScreenCoordinates

如果设为true，精灵的位置就是绝对位置。原点是屏幕的左上方

scaleByViewport

精灵的大小取决于视图窗口的尺寸。如果设为true，那么精灵的尺寸=图片宽度/视图窗口的高度。如果设为false，那么精灵的尺寸=图片宽度/1.0

alignment

当精灵被缩放时（使用scale属性），该属性指定精灵从哪里开始缩放。如果将该属性设为THREE.SpriteAlignment.topLeft，那么当增加或减少精灵的缩放比例时，精灵的左上角保持不动

uvOffset

结合uvOffset属性，选择精灵所用的纹理

uvScale

结合uvScale属性，选择精灵所用的纹理

你还可以在这个材质上设置depthTest属性和depthWrite属性。参考day3