如何获取Three.js中BoxGeometry所有面的中心顶点位置？

针对你创建的带细分参数的BoxGeometry，以下是几种获取面中心位置的实现方法：

1. 获取所有三角面的中心 #

Three.js会将每个四边形面拆分为两个三角面，你可以遍历BoxGeometry的faces数组，通过每个三角面的三个顶点坐标取平均值得到中心：

const boxGeometry = new THREE.BoxGeometry(1.5,1.5,1.5,2,2,2);
const material = new THREE.MeshBasicMaterial({
      color:0xffffff,
      wireframe:true,
});
const mesh = new THREE.Mesh(boxGeometry,material);

// 存储所有三角面中心的数组
const triangleFaceCenters = [];

boxGeometry.faces.forEach(face => {
  // 获取当前三角面的三个顶点
  const v1 = boxGeometry.vertices[face.a];
  const v2 = boxGeometry.vertices[face.b];
  const v3 = boxGeometry.vertices[face.c];
  
  // 计算中心坐标（三个顶点坐标的平均值）
  const center = new THREE.Vector3(
    (v1.x + v2.x + v3.x) / 3,
    (v1.y + v2.y + v3.y) / 3,
    (v1.z + v2.z + v3.z) / 3
  );
  
  triangleFaceCenters.push(center);
});

// 示例：打印第一个三角面的中心坐标
console.log('第一个三角面中心:', triangleFaceCenters[0]);

2. 获取所有四边形小面的中心 #

你设置了三个方向的分段数为2，每个原始大面会被拆分为4个四边形小面。每个四边形对应两个连续的三角面，可通过合并这两个面的顶点计算中心：

const quadFaceCenters = [];

// 每两个三角面对应一个四边形，按步长2遍历
for (let i = 0; i < boxGeometry.faces.length; i += 2) {
  const face1 = boxGeometry.faces[i];
  const face2 = boxGeometry.faces[i+1];
  
  // 提取四边形的四个唯一顶点
  const vertexIndices = new Set([face1.a, face1.b, face1.c, face2.a, face2.b, face2.c]);
  const vertices = Array.from(vertexIndices).map(idx => boxGeometry.vertices[idx]);
  
  // 计算四个顶点的平均坐标
  const center = new THREE.Vector3();
  vertices.forEach(v => center.add(v));
  center.divideScalar(vertices.length);
  
  quadFaceCenters.push(center);
}

// 示例：打印四边形小面的总数量（6个大面×4个小面=24个）
console.log('四边形小面中心数量:', quadFaceCenters.length);

3. 获取6个原始大面的中心 #

如果不需要细分后的小面，直接通过立方体尺寸计算原始大面中心更高效：

const cubeSize = new THREE.Vector3(1.5, 1.5, 1.5);
const bigFaceCenters = [
  new THREE.Vector3(cubeSize.x/2, 0, 0),    // 右侧面中心
  new THREE.Vector3(-cubeSize.x/2, 0, 0),   // 左侧面中心
  new THREE.Vector3(0, cubeSize.y/2, 0),    // 上侧面中心
  new THREE.Vector3(0, -cubeSize.y/2, 0),   // 下侧面中心
  new THREE.Vector3(0, 0, cubeSize.z/2),    // 前侧面中心
  new THREE.Vector3(0, 0, -cubeSize.z/2)    // 后侧面中心
];

console.log('原始大面中心:', bigFaceCenters);

注意事项 #

如果后续对mesh执行了平移、旋转等变换，需要使用localToWorld方法将局部坐标的中心转换为世界坐标：

// 示例：转换第一个三角面中心到世界坐标
const worldCenter = mesh.localToWorld(triangleFaceCenters[0].clone());

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