边缘几何体和线框几何体

EdgesGeometry 可以创建几何体的边缘几何体

gltfLoader.load('/model/city.glb', (gltf) => {
  gltf.scene.traverse((child: THREE.Mesh) => {
    if (!child.isMesh) return

    const geometry = child.geometry
    if (!geometry) return

    // 创建边缘几何体
    const edges = new THREE.EdgesGeometry(geometry)
    // 创建线段材质
    const edgesMaterial = new THREE.LineBasicMaterial({ color: 0xffffff })
    // 创建线段
    const edgesMesh = new THREE.LineSegments(edges, edgesMaterial)

    // 更新线段的世界矩阵
    child.updateWorldMatrix(true, true)
    edgesMesh.applyMatrix4(child.matrix)

    scene.add(edgesMesh)
  })
})

另外是 WireframeGeometry 可以创建几何体的线框几何体，这个等同于设置 wireframe: true 的效果

gltfLoader.load('/model/city.glb', (gltf) => {
  gltf.scene.traverse((child: THREE.Mesh) => {
    if (!child.isMesh) return

    const geometry = child.geometry
    if (!geometry) return

    // 创建线框几何体
    const wireframe = new THREE.WireframeGeometry(geometry)
    // 创建线框材质
    const wireframeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff })
    // 创建线框
    const wireframeMesh = new THREE.LineSegments(wireframe, wireframeMaterial)

    // 更新线段的世界矩阵
    child.updateWorldMatrix(true, true)
    wireframeMesh.applyMatrix4(child.matrix)

    scene.add(wireframeMesh)
  })
})

本节示例代码：https://github.com/wukaipeng-dev/threejs-demo/blob/main/03-geometry/src/main-wireframe.ts