three.js线框模式
背景
设计师希望弄一个模型的这个效果:
但是,我使用three.js提供的EdgesGeometry死活只能做到下面这种:
后来才知道three.js只支持画三角面,四边形面并不支持,这是由更底层的webGL决定的。
但是在查找资料的过程中,我了解到了不少three.js的知识,比如后处理,在模型加载之后,可以通过后处理实现很多效果,比如物体发光、抗锯齿等,后处理参考;而且three.js中的线的宽度是无法改变的,但是使用Line2可以改变;在three.js的论坛上有很多前辈遇到过我遇到的同样的问题,上面两幅图就是在threejs论坛上截的。
参考资料
改变threejs线宽
threejs物体发光效果实现方法整理
threejs轮廓线、边框线效果实现方法整理
一种比原生threejs原生轮廓线更好的轮廓线实现