1.粒子（也叫精灵）

我们可以使用THREE.Sprite来手工创建粒子，它需要传入唯一的参数材质（THREE.SpriteMaterial或THREE.SpriteCanvasMaterial）
THREE.Sprite于THREE.Mesh一样，都是THREE.Oject3D的子类，所以THREE.Sprite可以使用THREE.Mesh的大部分属性

1678242229488.png

使用THREE.Sprite可以很容易创造粒子，但是创造大量的THREE.Sprite时，就会有严重的性能问题，因为每个THREE.Sprite对象都需要去管理，所以这时候就需要使用THREE.Points了，我们只需要使用THREE.points对象，就能够实现统一管理大量粒子
HTREE.PointsMaterial对象的所有可设置的属性如下：

• color 粒子系统所有粒子的颜色
• map 可以在粒子中应用某种材质
• size 指定粒子大小，默认1
• sizeAnnutation 如果该属性为false，那么所有粒子都将拥有相同尺寸，无论距离多远，如果为true，粒子大小将取决于摄像机的远近
• vertexColors 一般来说，THREE.Points中的粒子颜色都是相同的，如果该属性设置为THREE.VertexColors，并且几何体数组中的颜色也有值，那么会使用数组中定义的颜色值，默认THREE.NoColors
• opacity 定义粒子不透明底，默认1完全不透明，与transparent，配合使用
• transparent 如果设置为true，那么opacity生效
• blending 指定粒子渲染的融合程度
• fog 是否受场景中的雾化效果影响，默认true

在webGLRenderer中使用html5画布

如果我们想要在WebGLRenderer中使用·canvas画布，可以采用两种方式，可以使用THREE.PointsMaterial创建THREE.Points对象，或者使用THREE.Sprite和THREE.SpriteMaterial的map属性

1678329479582.png

使用纹理化粒子

图像样式化粒子还可以使用THREE.TextureLoader().load()函数将图像加载为THREE.Texture对象，然后将THREE.Texture分配给材质的map属性

2.几何体的组合、合并和外部模型的加载

2-1.几何体对象的组合

当你创建多个网格对象时，你可以用THREE.Group将它们放到一个组中进行管理
当几何体被放置在组中的时候，你可以对组进行旋转、平移。缩放操作，这样组里的所有对象都会发生变化
旋转的中心是组的中心点，也可以对组内的某个对象单独进行操作，但是需要注意的是。所有定位、旋转、变形都是相对于父对象的

2-2.多个网格合并成一个网格

组可以管理大量网格，但对象·特别多的时候，性能就会到达瓶颈
因此我们可采用网格合并的方式，来提高的性能，但合并后的网格就没法操作单个网格进行旋转、移动操作
我们可以使用mergeBufferGeometries来实现多个mesh合并为一个mesh且可以使用多个Material

2-3.编码时改变几何体的位置进行合并网格

使用applyMatrix4（）进行向量矩阵变换，applyMatrix4()是三维向量Vector的方法

2-4.从外部资源加载几何体

three.js可以读取几种三维文本文件格式，并从中导出几何体网络，支持的文件格式如下

2-4-1.使用JSON保存和加载模型

//保存模型，将场景中的对象转换成json
scene.toJSON()
//将内容转换成JSON对象，然后使用ObjectLoader对象例的方法，将对象转换成three.js可以识别的模型对象
let loader = new ObjectLoader()
let obj = loader.parse(json数据)

2-4-2.引用obj

使用OBJLoader加载OBJ模型

注：three.js模型导入obj404报错,因为iis缺少MIMI的文件映射
打开IIS，点击MIME类型，把obj添加进去类型直接设置成text/html就可以了

3.three.js动画

3-1.简单动画

通过使用requestAnimationFrame修改物体的属性来实现动画

3-2.复杂动画