网站建设宣传手机创建网站免费注册

背景

设计师希望弄一个模型的这个效果：

但是，我使用three.js提供的EdgesGeometry死活只能做到下面这种：

后来才知道three.js只支持画三角面，四边形面并不支持，这是由更底层的webGL决定的。
但是在查找资料的过程中，我了解到了不少three.js的知识，比如后处理，在模型加载之后，可以通过后处理实现很多效果，比如物体发光、抗锯齿等，后处理参考；而且three.js中的线的宽度是无法改变的，但是使用Line2可以改变；在three.js的论坛上有很多前辈遇到过我遇到的同样的问题，上面两幅图就是在threejs论坛上截的。

参考资料

改变threejs线宽
threejs物体发光效果实现方法整理
threejs轮廓线、边框线效果实现方法整理
一种比原生threejs原生轮廓线更好的轮廓线实现