Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。
示例代码采用three.js-r73版本: github.com/mrdoob/thre…
在3D建模过程中，当我们需要创建很多细小的物体时，并不会一个个地创建这些物体，而是通过创建粒子，粒子可以模拟很多效果，例如烟花、火焰、雨滴、雪花、云朵等等。Three.js提供了各种的粒子系统创建方式。让我们来看看吧。
粒子系统介绍
- ThreeJS 粒子系统中，THREE.Points是用来创建点的类，也用来批量管理粒子，基于几何体的顶点来渲染每个粒子。这个类的构造函数有两个参数，geometry(几何体)和material(材质)，几何体参数用来设置粒子的位置坐标，而材质参数用来设置粒子的外观。
粒子的特性
- 粒子非常小
- 粒子非常多
- 粒子有一定的运动规律
根据上面三个特性，我们就可以实现比较好看的粒子效果
人物粒子系统
实现思路
- 构建人型粒子：从一个人物3D模型中，取得点，由这些点构成粒子系统
- 为粒子染色：就是为粒子系统中每一个粒子赋予一种颜色(给粒子设置不同颜色)
- 让粒子运动起来：使用缓动技术，让每一个粒子随着时间运动起来
- 让场景旋转起来：为了从多个方向观看场景，让场景看上去更酷
搭建框架
- 搭建基本框架，初始化场景、相机
- 加载模型
- 将模型转换为粒子，生成粒子系统
- 实现粒子运动
资源准备
基础框架
- 我们把之前的代码整理一下，保留初始化加载的视图、相机、场景、渲染器、性能监测、布控球等等逻辑代码，删除初始化物体的代码，用来开发我们的例子系统
- codepen示例代码
obj模型
- 人物模型，我们还使用之前使用的人物模型即可
- threejs-models.vercel.app/models/obj/…
地面模型
- json模型，我们的地面需要JSONLoader来解析，threejs内置的loader方法
- threejs-models.vercel.app/models/json…
车模型
- 二进制模型，我们的车模型需要BinaryLoader来解析
- threejs-models.vercel.app/models/bina…
二进制模型优缺点
- 优点
- 加密文件，无法随意修改，更加安全
- 所占资源比较小
- 不需要过多地进行字段解析，直接加载二进制代码
- 缺点
- 文件不易修改，需要软件重新构建资源
- 语义不明确，不易读懂
