继续输出有价值的干货，动效教程我不信还有比我讲的更详细的
今天，我再来教大家制作腾讯云首页Banner上的立体动效。也就是类似这种：
这是我最终做好的效果：
整个教程，我是通过C4D来完成的建模，利用Three.js来编写的加载模型代码。为了让大家有更好的学习体验，我还特意录制了5个很短的视频教程，帮助大家学习。如果你有条件，可以去B站观看视频教程：
视频教程1《日常前戏》
视频教程2《立体图标拆分过程&代码实现原理》
视频教程3《C4D建模球体》这个教程里面还讲解了大家交付模型时候要注意的事项
视频教程4《C4D建模两侧螺旋线》
视频教程5《C4D建模底座》
如果你正在办公场所，不方便看视频，你可以查看我接下来的图文教程，它同样非常详细。
需要特别说明的是：本教程和腾讯没有任何关系，教程只是我自己分析琢磨他们的制作过程和思路。本人也并不腾讯工作，它的实际制作过程、代码编写方式很可能和我大相径庭。我只能根据我自己的知识和理解模拟出类似的效果。
建模部分和代码没有参考过任何地方，100%我原创。我只是大胆的想、勇敢的试，最终做出了“类似”的效果。兄弟们啊，还是那句老话：只要胆子大，女鬼咱也能让她放产假！希望今后你遇到喜欢的女孩，也能够大胆的追，勇敢的表白。
好像跑题了，我们还是开始教程吧。不过反正都跑题了，此情此景，我在开始教程前突然想吟诗一首：
好了，现在真正的、正式的、开始我们的教程（严肃脸）
——————————————————————
教程第一部分：立体图标拆分过程
在教程开始之前，我们先来拆解一下整个模型与动效还有代码的过程。分解后有利于你有一个清晰的思路。
现在的转圈还是在一个平面上的，把圆环和小球加入到一个组里面，让整个组的y轴旋转30度左右即可。
模型全部弄好后，就剩下灯光了。这里的灯光因为会移动，所以并不是C4D完成的，你也不要考虑什么渲染啥的。因为Three.js里面可以直接新建灯光。
灯光就是上下两盏，上面的灯光循环左右移动，看起来整体效果就非常的丰富了。
最后的最后，就是鼠标的跟随特效了。这个部分的构思非常的巧妙，详情看下图：
教程第二部分：C4D建模球体
将圆弧弄成180度，这样就是一个半圆了。把方向设置成平躺在地面上。
由于这个面是弧线的，加上光照效果，很可能最终浏览器加载后会有“破面”，所以按两次k调整为切刀，把顶部的这个面横向切分一下。你可以简单的理解成多布置一些线条在这个面上，模型就更稳定。
选中克隆对象，C一下，这样模型就变成了12个扇形。把蓝色材质给1、3、5、7、9、11。浅色材质给2、4、6、8、10、12
教程第三部分：螺旋线模型
你可以使用平滑样条工具让这个曲线更加圆滑一点儿。
教程第四部分：制作一个底座
最后，你把以上3个模型全部导出OBJ格式，然后把他们的材质都放在一起，等于是3个OBJ加一个mtl格式的材质，交给程序员就完成了。
再次强调一下，我们的模型一定要想办法弄得足够小。类似于复杂的细分曲面之类的效果我们是不可能去尝试的。因为那样会让模型变大，做出网页加载不出来的东西，没有意义。今天的教程就不教大家写代码了，因为代码都是简单的旋转动画，没什么好讲解和学习的。关键的鼠标跟随效果，我也已经在前面给大家分析过原理了。
目前为止，我已经教会了大家阿里三维图标动效、阿里粒子效果、腾讯云立体动效。如果你还看到了什么有意思的效果，想学习，可以给我留言~制作这样的教程非常的辛苦，需要自己挖空心思去想，去尝试，希望你可以给我点个赞~