文章摘要:某天,产品小姐姐找到我,要在页面上放一个动态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;