手摸手，带你实现3D粒子特效

文章摘要：某天，产品小姐姐找到我，要在页面上放一个动态3D模型…不会webGL？没关系！今天就来聊一聊如何用从零实现3D粒子特效。

背景

近年来，随着互联网的迅速发展，用户对产品的视觉效果需求也更加强烈。生动逼真的 3D 动画效果可以让用户身临其境，叹为观止。

从上面的动图可以看到

• 一开始在场景中是无数个乱序的点
• 然后逐渐地汇集到一起，形成一个立体的 LOGO,
• 最后 LOGO 中的粒子开始’呼吸‘起来。

下面我会介绍一下如何一步步实现这种粒子系统效果。

three

在 web 端实现 3D 效果时，第一个相到的当然都会是 webGL（web graphic language） ，即浏览器原生的一套图形API，但是使用 webGL 进行复杂 3D 效果的开发会大大增加工作量，比如坐标变换，法线贴图、透视模拟等等。所以 three 应运而生，官方对其的介绍是 A 3D javascript library ，早期是由计算机图形学天才Ricardo Cabello 在 2010年开源的框架，至今已有10年的历史。在 three 世界的三大概念分别是 camera(相机) ，scene(场景) ，renderer(渲染器） ，下图是三者的对应关系。

场景

场景我们可以理解为一个舞台，一个程序只能同时有一个场景。

创建一个场景：  ⬇️

相机

对应现实世界当中的照相机，我们在屏幕中所看到的所有图像都是由相机来捕捉到的。three 提供的相机有三种，分别是 PerspectiveCamera(透视相机)  、OrthographicCamera(正交相机)  以及 CubeCamera(立方体相机)。

• 透视投影相机捕捉到的画面是类似人眼在真实世界中看到的有  “近大远小”  的效果（如下左图a）；
• 正交投影相机捕捉到的画面和他与相机的距离无关，即大小不会根据距离变大而收缩，对于在三维空间内平行的线，投影到二维空间中也一定是平行的（如下左图b）；
• 立方体相机则与前两个不同，他可以理解为在立方体的每一个面上都设有一个透视摄像机，用于模拟 3D 世界的反光效果（如下右图）；

创建一个透视相机：  ⬇️

fov:  视场角，是显示边缘与摄像机连线的夹角，游戏中通常为40-60，这里取值50；

aspect:  渲染结果横向尺寸和纵向尺寸的比值，推荐默认值为窗口的长宽比；

near:  从距离摄像机多近的位置才开始渲染，推荐默认值0.1；

far:  从距离摄像机多近的位置才开始渲染，推荐默认值1000;

渲染器