Three.js WireframeGeometry线框几何体展示

线框效果的 3D 模型展示，调试和可视化方便。WireframeGeometry 就是干这个的，配合 Three.js 一起用，效果还挺直观。

直接用 THREE.WireframeGeometry 包一层几何体，比如 BoxGeometry、SphereGeometry 都行。套个 LineBasicMaterial，再丢进 LineSegments 里就完事，响应也快，代码也简单。

场景里加个立方体线框就是下面这样：

var geometry = new THREE.WireframeGeometry(new THREE.BoxGeometry(10, 10, 10));
var material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
var wireframe = new THREE.LineSegments(geometry, material);
scene.add(wireframe);

线框模式比较适合用来看结构，比如你在调模型，或者想展示构造过程，用它还挺省事。

WireframeGeometry 其实是继承自 BufferGeometry 的，所以顶点啥的全是缓冲区搞定，渲染效率也高。大场景下你会发现这个比用实体模型轻多。

另外要注意，材质不能乱用哈，用 LineBasicMaterial 最合适，灯光啥的它不吃，但你可以改 color、opacity 这些，配色好看些。

如果你刚接触 Three.js，或者想搞个 3D 编辑器或可视化小工具，这个 demo 值得一看。

推荐顺带看看这些：

• Three.js 企业实战 WEBGL 教程-Three.js 教程 2023
• 简单几何体
• WEBGL Three.js 用到的函数库

想做炫一点的效果？后期可以结合 OrbitControls 或加点动画让线框转起来，展示感会更强。