大家好，我是 灰色执照，之前给大家带来了阿里云首页的粒子效果教程，也就是这个：你可以访问下面蓝色链接来查看效果

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

今天，我再来教大家制作腾讯云首页Banner上的立体动效。也就是类似这种：

比较遗憾的是：当我做好这个教程，写完文章以后。腾讯云居然改版了，首页上的图标换了几个。不过没有关系，我们主要教的是大家制作的方法。

这是我最终做好的效果：

你可以访问这个网站来查看我制作好的最终效果

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

整个教程，我是通过C4D来完成的建模，利用Three.js来编写的加载模型代码。为了让大家有更好的学习体验，我还特意录制了5个很短的视频教程，帮助大家学习。如果你有条件，可以去B站观看视频教程：

视频教程1 《日常前戏》

https://www.bilibili.com/video/BV1Ku411Q7Vj

视频教程2 《立体图标拆分过程 & 代码实现原理》

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

视频教程3 《C4D建模球体》
这个教程里面还讲解了大家交付模型时候要注意的事项

https://www.bilibili.com/video/BV1Ku411Q7Vj?p=3

视频教程4 《C4D建模两侧螺旋线》

https://www.bilibili.com/video/BV1Ku411Q7Vj?p=4

视频教程5 《C4D建模底座》

https://www.bilibili.com/video/BV1Ku411Q7Vj?p=5

如果你正在办公场所，不方便看视频，你可以查看我接下来的 图文教程，它同样非常详细。

需要特别说明的是： 本教程和腾讯没有任何关系，教程只是我自己分析琢磨他们的制作过程和思路。本人也并不腾讯工作，它的实际制作过程、代码编写方式很可能和我大相径庭。我只能根据我自己的知识和理解模拟出类似的效果。

建模部分和代码没有参考过任何地方，100%我原创。我只是大胆的想、勇敢的试，最终做出了“类似”的效果。兄弟们啊，还是那句老话： 只要胆子大，女鬼咱也能让她放 产假！ 希望今后你遇到喜欢的女孩，也能够大胆的追，勇敢的表白。

好像跑题了，我们还是开始教程吧。不过反正都跑题了，此情此景，我在开始教程前突然想吟诗一首：

效果做得好，不能落地它始终是飞机稿；
跟着灰哥搞，开发小哥再不说实现不了；
关注我账号，设计和代码咱一起全都教；
做梦也会笑，平凡人生能遇到灰色执照。

好了，现在真正的、正式的、开始我们的教程（严肃脸）

——————————————————————

 教程第一部分：立体图标拆分过程 

在教程开始之前，我们先来拆解一下整个模型与动效还有代码的过程。分解后有利于你有一个清晰的思路。

首先，我们肯定是需要利用C4D或者Blender来制作这样一个像是翻页感觉的球体。只需要给它加上浅蓝和深蓝色两种材质即可。导出OBJ格式的模型后，利用代码写一个X轴不停旋转即可。完成上述步骤后，球体在Y坐标上再写一个大约30度左右的旋转，让它倾斜。

球体弄好后，我们直接用代码写一个圆环，在Three.js里面你只要new 一个TorusGeometry对象即可。同时，你在用代码新建一个小球体。小球的x坐标为Math.cos(角度) + 圆环的半径。小球的y坐标为Math.sin(角度) + 圆环的半径。因为角度随着时间不停的增加，这样小球就围绕圆环转起来圆圈。

现在的转圈还是在一个平面上的，把圆环和小球加入到一个组里面，让整个组的y轴旋转30度左右即可。

球和圆环都弄好后，就剩下两侧的螺旋线了。C4D里面刚好有螺旋线功能，你通过扫描一个圆圈，可以制作这样的模型（详情见后面的教程）。螺旋线制作一个即可，通过代码克隆一个，移动到对面并且旋转180度即可。最后，你还要给它做一个底座（基本可以理解成几个立方体的组合）

模型全部弄好后，就剩下灯光了。这里的灯光因为会移动，所以并不是C4D完成的，你也不要考虑什么渲染啥的。因为Three.js里面可以直接新建灯光。

灯光就是上下两盏，上面的灯光循环左右移动，看起来整体效果就非常的丰富了。

最后的最后，就是鼠标的跟随特效了。这个部分的构思非常的巧妙，详情看下图：

——————————————————————

  教程第二部分：C4D建模球体 

新建一个圆弧

将圆弧弄成180度，这样就是一个半圆了。把方向设置成平躺在地面上。

选中圆弧，对它C一下（键盘上的字母C），这样他就是一个可以编辑的线条了。用钢笔工具连接两个端点。

新建一个“放样”，把圆弧放到放样的子节点。然后设置数量为16左右。这样，圆弧就从原来的线条变成了一整个面。

选中圆弧，找到弧线上左边的点向下移动，右边的点向上移动。

弧线中间的锚点移动一下两侧的手柄。让它变成一个圆滑的状态，如下图：

把圆角顶部的两个端点也稍微调整锚点，让整个圆弧更加圆滑。

你最终就得到了这样一个面：

选中放样和圆弧2个元素，右键 > 连接对象加删除。这样他们就合并成了一个整体。用选面工具选择这个整体的面，右键>挤压。这样你就得到了一个有厚度的扇形。在挤压的时候，别忘记勾选“创建封顶”。

由于这个面是弧线的，加上光照效果，很可能最终浏览器加载后会有“破面”，所以按两次k 调整为切刀，把顶部的这个面横向切分一下。你可以简单的理解成多布置一些线条在这个面上，模型就更稳定。

不停的用切刀，横向的连接两侧的平行线。最终得到如下布线效果的模型。这样带有弧线的模型就非常稳定了，不会再出现一些破面等情况。

选择整个模型让它向左侧移动一小段距离，选中比例尺，让模型的起点变成偏左。这样做的目的就是为了克隆多个的时候大家都有一段空隙，模型不会重合到一起。

新建一个克隆，把做好的模型拖成它的子节点。

把克隆调整成放射状，数量调整成12个，半径设置成0。通过这三个步骤，球体就做好了。

旋转一下来看看，这就是成品了，是不是很简单。

双击材质面板，弄两个材质球。一个蓝色，一个浅蓝色。

材质其实非常简单，就是加了个颜色、透明度和一点反射而已，都是我随手调的。除了颜色不一样，材质球其它参数几乎一样。

选中克隆对象，C一下，这样模型就变成了12个扇形。把蓝色材质给1、3、5、7、9、11。浅色材质给2、4、6、8、10、12

这样，整个球体就做好了。文件 > 导出OBJ格式即可。导出的时候，连材质一起勾选上。

这就是导出结果了。obj是模型，只有314KB，mtl就是材质，只有1KB。利用three.js加载它们比加载一张png图片还小，非常的完美！球体的模型，我们就100%做完了。怎么样，非常的简单吧？

——————————————————————

 教程第三部分：螺旋线模型 

新建一个螺旋

调整到侧面方便你观察

调整一下起始的半径，把一端调整成0，结束角度可以设置螺旋转几圈，你可以根据需要，转个2~3圈。高度设小一点，免得线条整体太长。

复制一个一模一样的，然后旋转180度。

将2个都选中，右键 >连接对象+删除。这样它们就合并成了一个整体。

利用选点工具，拉框选择靠在一起一侧的点，删掉它们。

删掉选中的点后，自己用钢笔工具绘制一个点，把它们连接起来。

试着调整它的锚点和位置，让新加入的这个点看起来过渡自然。

你可以使用平滑样条工具让这个曲线更加圆滑一点儿。

接下来我们新建一个小圆环。

再新建一个扫描，把圆环和螺旋线都拖入到扫描的子节点里面去。圆环一定要在顶层。

这样，螺旋线就基本做好了，你稍微调整一下圆环的半径、分段就可以了。把刚才的浅色材质复制一个，随便调整一下，加上去就100%完成了。

——————————————————————

  教程第四部分：制作一个底座 

新建一个圆柱

使用选面工具，把最顶部的面全部选中。

按下字母T，执行缩放，把这个面缩小

右键，挤压。把这个面向上挤压出一个新的高度。

按字母T，再次缩放。向里面缩放一小段距离。又形成了一个斜面。

通过这样的方式，不停的缩放，挤压，缩放，挤压。就可以做出不同的层次了。

底部，你也可以通过同样的方式，选择底部那个面，做出一些变化：

这样，一个底座就做好了。随便给它添加一个材质即可。

当然，这只是我随手做的。你可以根据需要，或者完全模仿腾讯云去调整成你想要的样子。

最后，你把以上3个模型全部导出OBJ格式，然后把他们的材质都放在一起，等于是3个OBJ加一个mtl格式的材质，交给程序员就完成了。

再次强调一下，我们的模型一定要想办法弄得足够小。类似于复杂的细分曲面之类的效果我们是不可能去尝试的。因为那样会让模型变大，做出网页加载不出来的东西，没有意义。今天的教程就不教大家写代码了，因为代码都是简单的旋转动画，没什么好讲解和学习的。关键的鼠标跟随效果，我也已经在前面给大家分析过原理了。

目前为止，我已经教会了大家阿里三维图标动效、阿里粒子效果、腾讯云立体动效。如果你还看到了什么有意思的效果，想学习，可以给我留言~制作这样的教程非常的辛苦，需要自己挖空心思去想，去尝试，希望你可以给我点个  赞 ~

Powered by Froala Editor