Threejs基础代码段（三）科技感线框

        提到线框，第一想到的是wireframe，显示几何体的内部线条，通常的方式为：

                        child.material.wireframe = isShow;

        其效果如下：

         对于简单几何体，其线框模式能勾勒外部轮廓线，效果尚可，但对于复杂模型，显示wireframe后会出现许多三角形，如下所示，这是我们所不需要的。

         我们的目的是显示几何体，勾勒模型简易轮廓，赋予半透明材质，突出科技感。

        先看效果，线框之前：

 

        线框后效果： 

         这里主要用到了EdgesGeometry（几何体边框辅助线）

EdgesGeometry( geometry : Geometry, thresholdAngle : Integer )

        示例代码：

        1.需要创建一个几何体

        2.将几何体传给EdgesGeometry的构造函数

        3.创建基础线条材质，并创建线框分段THREE.LineSegments

        4.最后将创建的线框加入的几何体中

// EdgesGeometry线框1
var line = null;
const lineMaterial = new THREE.LineBasicMaterial({color: '#1E90FF'});
function edgeGeometryWireframe(model, isShow){
    if(model){
        if(!line){
            line = new THREE.Group();
            model.traverse(function(child){
                if (child.isMesh){
                    let edges = new THREE.EdgesGeometry(child.geometry);
                    let lineS= new THREE.LineSegments(edges, lineMaterial);
                    line.add(lineS);
                }
            });
            scene.add(line);
        }
        model.visible = !isShow;
        line.visible = isShow;
    }
}
// EdgesGeometry线框2
var gbg2 = mFloor2.children[0].children[0].children[0].children[i].children[t].children[n]
let cubeEdges = new THREE.EdgesGeometry(gbg2.geometry, 10);
let edgesMtl = new THREE.LineBasicMaterial({ color: '#1E90FF' });
// edgesMtl.depthTest = false; 深度测试，若开启则是边框透明的效果
let cubeLine = new THREE.LineSegments(cubeEdges, edgesMtl);
wire.add(cubeLine)