粒子系统 Particles
粒子: 在3D空间中极其小的点或者球, 通常用于互不相连的点的特效, 比如烟花, 雪花, 沙子等等
粒子系统: 是大量的粒子组成的集合。通常用于实现复杂的动态效果,如烟雾、下雪、沙漏等等
粒子系统可以通过控制每个粒子的大小, 速度, 颜色, 位置等属性来实现非常精美的特效
1. 创建粒子系统的方法
- Sprite + SpriteMaterial
简单
- Points + PointsMaterial
相对容易, 性能比较高
- Points + PointsMaterial + Shader
实现复杂, 性能最好
2. 简单的粒子案例 (Sprite + SpriteMaterial)
2.1 单个粒子对象
报名课程后可查看完整文档
粒子系统
报名课程后可查看完整文档
这种方式会创建很多粒子对象, 数量越多, 性能消耗越大
3. 通过粒子系统创建点阵波纹 (Points + PointsMaterial)
- 1.1 创建基本粒子对象
Details
报名课程后可查看完整文档
1.2 把粒子排成直线 报名课程后可查看完整文档
1.3 把粒子排成网格 报名课程后可查看完整文档
1.4 让粒子动起来 报名课程后可查看完整文档
1.5 给粒子添加颜色 报名课程后可查看完整文档
1.6 gui调试 报名课程后可查看完整文档
4. 通过粒子系统创建立方体
随机生成粒子坐标
报名课程后可查看完整文档
材质 vertexColors 属性可以设置每个顶点的颜色值,通过这种技术可以创建更具有生动感的几何体,使颜色在不同的部位之间流动或混合。
总结 Geometry.attributes
报名课程后可查看完整文档
创建粒子系统的动画
报名课程后可查看完整文档
5. 创建雪花飞舞的效果
报名课程后可查看完整文档
6. threejs 内置的 WebGL 变量
webgl 全局变量(不用声明)
报名课程后可查看完整文档
源码位置参见: three/src/renderers/webgl/WebGLProgram.js
glsl 着色器类型
报名课程后可查看完整文档
webgl官方文档
报名课程后可查看完整文档