Skip to content

粒子系统 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官方文档

khronos 3D图形标准

webgl官网

webgl 2.0 规范

报名课程后可查看完整文档

Released under the CC BY-SA License.