2.THREEJS高级-模型外框线

上篇我写了一个给模型加辉光的效果，此篇在上篇的基础之上。把模型的外框线展示出来，然后再把模型通过图层隐藏，可以实现更加炫酷的效果。如果有些地方不懂可以看上篇或者给我留言。

• 新增图层1

   BLOOM_SCENE: 1,
   bloomLayer: new THREE.Layers(),
   materials: {},
   darkMaterial: new THREE.MeshBasicMaterial({ color: 'black' })
   init() {
     this.bloomLayer.set(this.BLOOM_SCENE);
   },
  

• 初始化相机的时候要把图层1打开，要不然默认只会展示图层0的东西

initCamera() {
       ......
  this.camera.layers.enable(1)
},

• 导入模型，给想展示辉光的设置图层为1。

initModel(url) {
  const loader = new GLTFLoader()
  let lineGroup = new THREE.Group()
  loader.load(url, (gltf) => {
    const model = gltf.scene;
    gltf.scene.traverse((obj) => {
      if (obj.isMesh) {
        lineGroup = changeModelMaterial(obj, lineGroup,1)
        lineGroup.layers.set(1)
      }
    })
    lineGroup.translateX(-5)
    this.scene.add(lineGroup);
    this.scene.add(model);
  });
},

• 画线要调用给的两个方法

    const mesh = object
    if (mesh.isMesh) {
        const quaternion = new THREE.Quaternion()
        const worldPos = new THREE.Vector3()
        const worldScale = new THREE.Vector3()
        // 获取四元数
        mesh.getWorldQuaternion(quaternion)
        // 获取位置信息
        mesh.getWorldPosition(worldPos)
        // 获取缩放比例
        mesh.getWorldScale(worldScale)
        // 以模型顶点信息创建线条
        const line = getLine(mesh, 30, undefined, 1)
        // 给线段赋予模型相同的坐标信息
        line.quaternion.copy(quaternion)
        line.position.copy(worldPos)
        line.scale.copy(worldScale)
        line.layers.set(layersNum)
        lineGroup.add(line)
    }
    return lineGroup
}
function getLine(object, thresholdAngle = 1, color = new THREE.Color('#ff0ff0'), opacity = 1) {
    color = new THREE.Color('#0fb1fb')
    const material = new THREE.LineBasicMaterial(
        {
            color: new THREE.Color(color),
            depthTest: true,
            transparent: true
        }
    )
    // 创建线条，参数为 几何体模型，相邻面的法线之间的角度，
    var edges = new THREE.EdgesGeometry(object.geometry, thresholdAngle);
    var line = new THREE.LineSegments(edges);
    material.opacity = opacity
    line.material = material
    return line;
}

效果图从左到右分别为：线框图位于图层0不发光，模型位于图层1发光，模型位于图层0不发光，线框图位于图层1发光。

以下案例源码在此处： gitee.com/ldglys/thre… 如果对您有所帮助请给个star。如果有不懂的可留言，看到会回复。