Three.js 边界线框 EdgesGeometry

Question

网格模型 Mesh 材质的.wireframe属性设置为 true，网格模型会显示为线框模式，网格模型的每一个三角形会通过 Threejs 线模型 Line 绘制出来。有时候并不希望通过 .wireframe=true 显示网格三角形的每一个边线，比如一个立方体每个面有两个三角形的话，设置 .wireframe=true 的时候，中线会有一条直线，在这种情况下可以通过几何体 EdgesGeometry 类来实现不显示立方体一个面的中间斜线。

EdgesGeometry 几何体本质上就是按照一定的算法重新组织已有几何体的顶点数据，，然后通过线模型 LineSegments 绘制出来 EdgesGeometry 构造的几何体。

长方体外部线框

下面的代码创建了一个立方体网格模型，同时通过 THREE.EdgesGeometry 和 LineSegments 绘制出来该立方体的外轮廓线框。

var box = new THREE.BoxGeometry(30, 30, 30);
var boxMaterial = new THREE.MeshPhongMaterial({
  color: 0xffff00,
});
// 立方体网格模型
var boxMesh = new THREE.Mesh(box, boxMaterial);
// 立方体几何体box作为EdgesGeometry参数创建一个新的几何体
var edges = new THREE.EdgesGeometry(box);
// 立方体线框，不显示中间的斜线
var edgesMaterial = new THREE.LineBasicMaterial({
  color: 0xffffff
})
var line = new THREE.LineSegments(edges,edgesMaterial);
// 网格模型和网格模型对应的轮廓线框插入到场景中
scene.add(boxMesh,line);

圆柱外部线框代码

和上面立方体的代码一样，可以复制到.html文件体验测试下EdgesGeometry的功能。你可以通过.wireframe属性开启，来比较.wireframe属性显示效果和EdgesGeometry的显示效果有什么不同。
可以看到效果，圆柱两个底面是平面，只显示外部圆形轮廓，内部的三角形边线是不显示的，对于曲面圆柱面，两个相邻三角形中间边线是不显示的。

var cylinder = new THREE.CylinderGeometry(15, 15, 100, 40);
var cylinderMaterial = new THREE.MeshPhongMaterial({
  color: 0x00ffff,
  // wireframe:true,
}); //材质对象
var cylinderMesh = new THREE.Mesh(cylinder, cylinderMaterial);
// cylinder作为EdgesGeometry的参数创建一个新的几何体
var edges3 = new THREE.EdgesGeometry(cylinder);
var edgesMaterial = new THREE.LineBasicMaterial({
  color: 0xffffff
})
var line3 = new THREE.LineSegments(edges3,edgesMaterial);
scene.add(cylinderMesh,line3);

EdgesHelper

EdgesHelper 是 Three.js 旧版本的一个类，现在已经被一个几何体类 EdgesGeometry 取代。