Three.js IcosahedronGeometry 二十面体效果


效果如图,如何来实现这个效果呢?首先我们要把问题分解,然后细化每个部分,分析用到哪些技术点,有哪些困难,最后再着手开发。

分解 细化 需求

这个效果我们可分成2个两大块,背景 和 多边形物体。背景可以用简单的css+图片来实现,因此我们需要制作一张背景图片,比较简单PS里拉拉渐变搞定:

下面是多边形物体了,当然是用Three.js来实现了。这时有些人的脑海中可能会迅速闪出如下思绪,这里应该需要两个多边形套在一起,一个是线框模式,一个是实体模式。线框模式 好像有个属性就能搞定,好像 wire什什么的那个。然后多边形 THREE.IcosahedronGeometry 就可以搞定,好简单开工开工。

编码

首先三下五除二给页面加好背景,然后搭建three基础框架:

场景搭好了,现在该主角登场了。按照之前的设想,两个物体一组合就搞定了。先来放入第一个多边形,为了以后统一控制它们旋转,还要建立一个父元素把它们装起来,而不是直接加到舞台上:

好了,大功告成了,运行下看看是不是图片的效果。

我的天,这黑乎乎的是什么?? 你可能忽略了 three 中一个极为重要的东西 光照。光照除了可以照亮物体,更重要的是它还可以用于氛围渲染,很多骚气的效果都离不开骚气的光照。那么我们就来好好分析一下光照吧。仔细看图应该能发现,几何体上方和下方颜色是有差别的,这需要我们给几何体从上下两个方向打2个光,开始吧:

主体终于正常的渲染出来了,好看多了。不过貌似还是缺点东西?是的,缺了线框交汇处的点。
下面就让我们来完成这最后的一步吧:

至此,开发基本完成,效果也实现了,有兴趣的小伙白可以自行调整参数。