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可以读取几种三维文本文件格式，并从中导出几何体网络，支持的文件格式如下
| 格式 | 描述 |
|---|---|
| json | three.js自己的json文件格式，你可以用它来声明你的几何体和场景，尽管它不正式，但是非常方便你去复用复杂的场景和几何体 |
| OBJ或MTL | obj是一种简单的三维文件格式，由WavefrontTechnologies创建，它是使用最广泛的三维文件格式，用来定义对象的几何体。MTL文件常同obj文件一起使用，在一个mtl文件中，obj文件用来定义对象的材质，thre.js还有一个可定制的obj导出器，叫做OBJExporter.js，可以将three.js中的模型导出一个obj文件中 |
| Collada | Collada是一种用基于xml的格式定义的数字的内容的格式，也是一种被广泛使用的格式，三维软件和渲染引擎都支持这种格式 |
| STL | STL是STereoLithphy（立体成型术）的缩写，广泛用于快速成型。如三维打印机的模型文件通常是STL文件。thress.js还有一个可定制的STL导出器，叫做STLExporter.js,可以用来将three.js中的模型导出 |
| CTM | ctm是openCTM的一种文件格式，可以用来压缩格式存储三维网格的三角形面 |
| VTK | vtk是由Visualization Toolkit创建一种文件格式，用来指定顶点和面，vyk有两种格式：二进制 |
| AWD | 一种用于三维场景的二进制格式，通常与away3d（away3d是falsh或flex上一个功能强大且实时的3D引擎，具有快速、高效、api清楚等优点，但是会有三角型消失的问题）引擎一起使用，这个加载程序不支持压缩的AWD文件 |
| Assimp | Open asset import library（也称为Assimp）是一种导入各种三维模型格式的标准方法 |
| VRML | VRML（Virtual Reality Modeling Language）是一种基于文本的格式，允许定义三维对象和世界 |
| Babylon | 一个三维javascript游戏库，它以自己内部格式存储模型 |
| PDB | 由Protein Data bank（蛋白质数据银行）创建，用于定义蛋白质的形状 |
| PLY | 这种格式的全称是（Polygon）文件格式，通常用来保存三维扫描仪的信息 |
| TDS | Autodesk 3DS格式 |
| 3MF | 3MF是3d打印的标准格式 |
| AMF | AMF是另一种3D打印的标准格式 |
| PlayCanvas | PlayCanvas是一款基于WebGL的开源游戏引擎，three.js可以加载基于该引擎的模型并在场景中使用 |
| Draco | Draco格式可以高效的保存几何体和点云 |
| PEWM | PRWM（Packed Raw WenGL Model）WebGL模型原始数据包，这是一种专注于高效存储和解析3D几何体的模式 |
| GCODE | GCODE是计算机程序与3D打印机和CNC机器通信的标准模式之一，打印模型时，计算机可以向3D打印机发送GCODE命令来控制打印机 |
| NRRD | NRRD是一种存储体素数据的文件格式，它可以用于保存CT扫描数据 |
| SVG | SVG是一种矢量图形的标准格式，它可以被three.js加载器加载成Path对象，该对象可以被拉伸成3D几何体，也可以被当做2D几何体来渲染 |
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修改物体的属性来实现动画
网友评论