大家好，我是 灰色执照~

上一篇教程里面，我教大家制作了三维小图标的动效+实现。也就是这个：

▲ 访问下面地址可以查看我上期制作的效果

https://www.pslkzs.com/demo/cloud/index.html

今天我来教大家制作 大厂常用的粒子特效。我们在阿里云和腾讯的网站上都可以看到这种三维粒子切换不同模型的效果：

▲ 可以访问下面地址来欣赏阿里云首页上的这个漂亮的粒子切换效果

https://cn.aliyun.com/

▲ 可以访问下面这个地址来欣赏腾讯做的粒子效果

https://up.qq.com/act/a20170301pre/index.html

▲ 这是我开发好的成果

https://pslkzs.com/demo/three/demo.html

今天的教程一共分成3个部分：

1、日常前戏

2、 设计师建模部分以及注意事项

3、 代码实现与讲解

 第一部分 日常前戏 

首先申明一下，阿里云和腾讯的粒子效果是如何实现的我完全不知道，只是因为有同学想学这样的效果我才临时去研究了下，模仿着做出近似的效果。

在整个研究学习的过程里面，我发现： 要实现类似的效果， 99%是考验我们程序员的功底。 设计师在整个环节里面要做的工作相对要少很多，只需要利用C4D或者Blender做几个简单的模型即可。你甚至连材质、灯光都完全不要花时间研究。

本次教程设计部分我主要是使用 C4D 完成，因为我自己相对熟悉 C4D 而已。实际上你用 Blender 也是一样，只要导出对应的格式即可。无论你使用什么类型的三维软件，你都需要仔细看下本文的第二部分，因为设计师和程序员合作的过程中，很可能会误认为是对方的工作出现了问题。反复沟通可能还很难发现问题出在哪里。

本次教程的代码部分我主要选用的是 Three.js 这个库来完成的（实际上阿里云首页和腾讯的效果都是用了 Three.js）。虽然有很多游戏框架做动画、渲染模型、光线效果更加厉害，但是我们是一个很注重设计效果“ 落地”的公众号，我要尽可能保证小公司、微小企业，包括平时完全不参与游戏开发公司的程序员也可以很简单的实现这些效果。Three.js 其实就是 Web 3D 领域的万金油，他本质上就是很简单的写常用的JS，我在过年期间随便看了看它的API，只花了一点儿时间就马上掌握了它。

除了 Three.js，我还用到了 Tween.js。Tween.js 主要是处理粒子的位置移动动画。它帮你封装好了很多运动曲线，比如调整运动的速度为：慢 -> 快 -> 慢，相信你在使用 AE 或者 C4D 的时候经常用到类似的运动曲线。下面是 Tween.js 的官方网站：

https://github.com/tweenjs/tween.js/

除此以外，我还特意录制了2个视频教程，如果有条件，我建议你直接观看视频，更加简单直观。当然，图文教程我也会写的非常详细。

视频地址1 《日常前戏》

https://www.bilibili.com/video/BV1AF411E7rG?p=1

视频地址2 《设计师建模部分以及注意事项》

https://www.bilibili.com/video/BV1AF411E7rG?p=2

 第二部分 设计师建模部分以及注意事项 

在开始制作这个效果之前，我心里有这样一个大概的编程思路：

1、有一个具体的三维模型。
2、有大概10000个小圆点（也就是我们常说的粒子），他们附着在模型表面上。
3、出现另一个模型的时候，每个点又慢慢的移动到另一个模型的表面上。

等等，10000个点如何附着在模型表面上？相隔多远一个点？遇到复杂的曲面这些点又该处于什么位置？为了解开这个疑问，我特意先写了一个加载模型的粒子代码，并且做出了以下对比：

注意事项1 模型 分段决定了点的数量和位置

在 C4D 中新建一个立方体，将 XYZ 分段分别弄成 3，3，3。导出为 FBX 格式。

加载成粒子后效果为下图

把细分曲面改成 10,10,10

再次加载新的模型，这个时候，你就能看到每个面上有 10 * 10 个点了。

▲ 通过这个例子，我们可以发现粒子的点会附着在线条相交处。模型的分段决定了粒子最终的呈现效果。

注意事项2  粒子的个数需要你调整到一个合适的数值（太少了不够用，太多了浪费）

现在，我们弄一个分段非常多的模型，如下图：

我们用 4 万个点来加载这个模型，你就会发现，粒子不够了

你有两种办法来解决这个问题。

1、 优化模型，减少分段。

2、 增加粒子的数量（比如我这里 4 万个点加载了大概 1/2，那我就加到 8 万个）非常遗憾的是，粒子的数量也不能毫无顾忌随意增加。粒子过多会掉帧和卡顿。所以，我推荐你优化模型为主。

这里我再推荐一个很不错的小技巧，加载模型后，程序员其实是可以读取这个模型有多少个点的。比如我要切换3个模型，我分别都提前读取一遍每个模型到底有多少个点，然后选最多的那个作为你粒子的数量。

注意事项3 模型必须合并成一个整体。

模型合并的好处是： 体积更小，加载更快。在写代码过程中，我只读取了父节点底下的第一个子节点所有点的位置。所以，当你的模型过于“复杂”的话，很可能只会显示“局部”。

现在，我们新建一个立方体，再新建一个管道。

用代码加载上面的模型，只会加载出其中一个。

▲ 实际上，我是可以通过写代码读取模型里面的所有元素的。但是那样我要多写一个循环，还要把所有点的位置都合并起来，会很累，我怕掉头发（其实是我懒，但是我不能明说）

出现只能加载部分模型的时候，你就需要合并掉所有的元素了。

也就是选中所有的元素，右键 > 连接对象+删除。

整个模型的所有点就全部都渲染出来了，她看起来就像你嫂子的臀部一样，非常的完美。

最后，我们还有一个小技巧要介绍。你看腾讯的这个例子。他的模型一会儿在左边，一会儿在右边。 目的就是让这些粒子的移动距离更大，这样的动画效果更漂亮。

▲ 腾讯的模型有的在左侧

▲ 下一个模型又在右侧

如果你也想让自己的模型不在正中心，你可以通过改变坐标尺的位置来达到这个目的。

▲ 选中左侧的坐标尺，然后把整个模型的中心移动到一侧即可。如果你想做角度不同的模型（比如整个模型抬起头），你可以旋转后让它和一个空白对象合并即可。

好了，以上就是我们设计师要了解的所有事情了。接下来你只需要自己用三维软件建立几个模型，然后导出 FBX 格式用来做模型切换了。 因为我不是教大家 C4D 或者 Blender 教程，建模部分大家就根据自己的需要来弄吧。我们将直接进入编写代码的部分。如果你是初学者，想知道我是如何制作模型的，可以去b站看我文章前半部分提到的第二个视频教程。

如果你是设计师，不想学习代码，请关注我们公众号“灰大设计”，并且发送：粒子代码，你可以获取我写好的全部代码，直接使用。

 第三部分 代码实现与讲解 

我们先在 html 页面里面弄个 shader，通常粒子都是一个矩形的点（看起来像一个像素点），你也可以加载透明背景的 png 当做粒子，我们弄 shader 的目的就是为了不加载图片，然后实现粒子的点是圆圈。shader 这个东西是属于 WebGL 方面的内容，如果你不从事图形化编程相关的工作，我不鼓励去花精力去研究这个玩意。当然，你非要说你有兴趣、有精力，就是要去研究一下，我也不拦着你。

阿里云首页的模型粒子变换就用了一个比较复杂的 shader，他的代码没有公开，我这里就直接 copy 了 three.js 官网一段简单的，我 Copy 的是官方的那个波浪的例子（如下图）

▲ https://threejs.org/examples/?q=wave#webgl_points_waves

在弄一个场景，和一个摄像机，摄像机从天空中往下拍摄。我这里设置摄像机的拍摄位置是 10,200,400 实际上这都是我随手弄的。从天上往下拍就可以了。

除此以外，我们还要弄个 WebGLRenderer，把这一切渲染到界面上。

弄 1000 个点当做粒子，随机他的位置和大小。需要注意的是，我们这里将缩放的比例弄成了随机数，这样粒子有大有小。如果你想让粒子全部一样大，直接设置size为一个具体的数值即可。

最后，你把所有的点全部加到场景中就可以了。

让场景自动转动起来，并且不停的渲染它。这样，你就得到了一个旋转的星空。

▲ 这就是目前代码得到的效果了，粒子会从左向右飘动（实际上是旋转了摄像机）

接下来就是加载模型了，通过 FBXLoader 就可以加载模型，然后读取模型上的点，用 Tween.js 让他移动到相应的坐标位置就可以了。此外，我们还加一个回调函数，当所有点都到达了对应的坐标位置，你就可以加载下一个模型了。

最后，我们还写了数组，你可以根据需要加载不同数量的模型，他会依次去加载。当加载到最后一个的时候，就又重新加载第一个了。不断循环

我在 obj 文件夹下放了3个模型，分别是 test10.fbx test6.fbx 和 test9.fbx。你可以根据你的需要，想加载几个就加载几个。赶紧获取代码，自己跑起来吧~

再强调一次，对公众号“灰大设计”发送 粒子代码 即可获取我写好的全部代码了。

今天的所有内容到这里就结束了，我是灰色执照，今后会继续为大家带来有价值的干货内容，谢谢大家，我们下期见。下期我准备教一教大家腾讯云首页Banner上的效果，也就是这样的东西：

“用心的写这样的教程很累，大家对文章点个赞，不过分吧？”

“好的，灰哥，一点都不过分，我现在就去点。期待你今后写出更多有价值的内容~”

Powered by Froala Editor