Three.js中如何获取经过变换的Mesh/Line模型的最新顶点坐标

问题原因 #

你直接读取circle.geometry.getAttribute('position').array拿到的是对象局部空间的原始顶点数据，Three.js设计上不会修改原始顶点数据，你对circle做的平移、旋转、缩放所有变换都会存储在对象的matrixWorld（世界矩阵）属性中，渲染时GPU会自动用这个矩阵计算最终顶点位置，所以原始顶点数据始终保持生成时的数值。

解决步骤 #

1. 先确保对象的世界矩阵已更新：如果对象刚完成变换还没触发渲染，需要手动调用updateMatrixWorld(true)强制更新世界矩阵，避免拿到旧的变换数据
2. 读取原始局部顶点数组
3. 遍历每个局部顶点，乘以对象的世界矩阵，得到世界空间下的最终顶点坐标

完整代码示例 #

// 你原有类型转换方法可以保留
const float32ArrayToVector3Array = (arr) => {
  let _arr = [];
  for (let i = 0; i < arr.length; i += 3) {
    _arr.push(new THREE.Vector3(arr[i], arr[i + 1], arr[i + 2]));
  }
  return _arr;
};

// 转换逻辑
// 1. 强制更新世界矩阵，确保所有变换生效
circle.updateMatrixWorld(true)
// 2. 读取原始局部顶点
const positionAttr = circle.geometry.getAttribute('position')
const localVertices = float32ArrayToVector3Array(positionAttr.array)
// 3. 每个顶点应用世界矩阵，得到变换后的世界坐标
const worldVertices = localVertices.map(v => v.clone().applyMatrix4(circle.matrixWorld))

此时worldVertices数组中存储的就是经过平移、旋转变换后的最新顶点坐标。

常见问题说明 #

Three.js没有提供直接获取Mesh/Line对象所有变换后顶点的内置方法，但提供了顶点应用矩阵的工具方法Vector3.applyMatrix4，可以直接用来做坐标转换。

注意事项 #

• 顶点应用矩阵时最好clone原始顶点，避免修改geometry中的原始顶点数据
• matrixWorld已经包含了当前对象所有父级的变换叠加，不需要额外计算父节点的变换
• 如果要高频调用该逻辑，建议复用Vector3实例，减少垃圾回收开销

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