[threejs]让导入的gltf模型显示边框

边框1效果图如下：

代码如下：

const gltfLoader1 = new GLTFLoader();
  gltfLoader1.load( "/assets/box/1/scene.gltf" ,function(gltf){
    let model = gltf.scene;
    model.scale.set(3,3,3)
    // scene1.add(model);
    // renderer1.render(scene1, camera1);

    model.traverse( function ( child ) {
      console.log(child)
      if ( child instanceof THREE.Mesh ) {
          let geometry = child.geometry;
          let material = child.material;
          let mesh = new THREE.Mesh(geometry, material);

          scene1.add(mesh);
          mesh.scale.set(0.03,0.03,0.03)
          const wireframeGeometry = new THREE.WireframeGeometry( geometry );
          const wireframeMaterial = new THREE.LineBasicMaterial( { color: 0xffffff } );
          const wireframe = new THREE.LineSegments( wireframeGeometry, wireframeMaterial );
          mesh.add( wireframe );
      }
  });

解析：

上述代码是对组成mesh的最小单元(mesh是由多个三角形组成)进行显示边框，所以会看到最终效果是三角形进行了描边

边框2效果图如下：

代码

const gltfLoader1 = new GLTFLoader();
gltfLoader1.load( "/assets/box/1/scene.gltf" ,function(gltf){
    let model = gltf.scene;
    model.scale.set(3,3,3)
    // 显示盒子的边框
    model.traverse( function ( child ) {
      console.log(child)
      if ( child instanceof THREE.Mesh ) {
          let geometry = child.geometry;
          let material = child.material;
          let mesh = new THREE.Mesh(geometry, material);

          scene1.add(mesh);

          const edges = new THREE.EdgesGeometry( geometry ); 
          const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) ); 
          mesh.add(line)
      }
  });

解析：

这种边框方式也成为了outline around，就是对模型的边进行描边，显示一个特殊颜色，看效果就看出来了。两种方式用法。