ThreeJS使用GLTFLoader从GLB模型获取顶点、边、面及三角面数量如何实现？

顶点数获取 #

你写的child.geometry.attributes.position.count就是正确的顶点数，BufferGeometry的position属性存储所有顶点的三维坐标，count就是顶点的总个数。之前获取vertices返回undefined是因为Three.js在r125版本后正式移除了旧版的Geometry类，现在所有几何默认都是BufferGeometry，不存在vertices属性。

三角面/面数获取 #

GLTF格式默认会把所有模型面三角化，所以通常面数等于三角面数，计算规则分两种情况：

• 如果几何带索引（存在geometry.index）：三角面数 = geometry.index.count / 3，索引缓冲中每3个索引对应一个三角面的三个顶点
• 如果几何不带索引：三角面数 = geometry.attributes.position.count / 3，无索引时每3个连续顶点构成一个三角面

边数获取 #

BufferGeometry默认不存储边数据，两种获取方式：

• 估算值：适合不需要绝对精确的场景，三角面数 * 1.5 即可，因为网格中绝大多数边会被两个相邻三角面共享
• 精确值：借助Three.js内置的EdgesGeometry计算：

const edges = new THREE.EdgesGeometry(geometry)
const edgeCount = edges.attributes.position.count / 2 // 每两个坐标点构成一条边

完整统计示例（遍历所有Mesh累加数值） #

let totalVertices = 0
let totalTriangles = 0
let totalEdges = 0

gltf.scene.traverse(child => {
  if (!child.isMesh) return
  const geometry = child.geometry
  // 累加顶点数
  totalVertices += geometry.attributes.position.count
  // 累加三角面数
  if (geometry.index) {
    totalTriangles += geometry.index.count / 3
  } else {
    totalTriangles += geometry.attributes.position.count / 3
  }
  // 累加精确边数（不需要可以去掉这部分）
  const edges = new THREE.EdgesGeometry(geometry)
  totalEdges += edges.attributes.position.count / 2
})

console.log('总顶点数：', totalVertices)
console.log('总三角面数：', totalTriangles)
console.log('总边数：', totalEdges)

内容的提问来源于stack exchange，提问作者Miger