Three.js中旋转网格后如何更新顶点位置？

核心原因 #

Three.js中，Mesh的rotateX()/rotateY()/rotateZ()等变换方法，本质是修改Mesh的局部变换属性（rotation/矩阵），不会直接修改几何体的原始顶点数据。渲染阶段引擎会自动将变换矩阵应用到顶点计算最终显示位置，但几何体本身的position属性数组不会被改动，这就是你打印顶点数组前后无变化的原因。

解决方案 #

根据需求提供两种可行方案：

方案1：永久修改几何体顶点（将变换写入几何体）

如果需要让几何体顶点本身更新为变换后的位置，可以将Mesh的变换矩阵应用到几何体上，之后顶点数组会直接反映变换结果：

// 旋转目标Mesh
planes[0].rotateX(Math.PI / 4);
// 将Mesh的变换矩阵应用到几何体
planes[0].geometry.applyMatrix4(planes[0].matrix);
// 重置Mesh的变换属性（避免后续重复应用变换）
planes[0].rotation.set(0, 0, 0);
planes[0].position.set(0, 0, 0);
planes[0].scale.set(1, 1, 1);
planes[0].updateMatrix();
// 现在获取的顶点数组就是旋转后的结果
console.log(planes[0].geometry.attributes.position.array);

方案2：实时计算变换后的顶点位置（不修改原始几何体）

如果不需要改动原始几何体，只是临时获取变换后的顶点坐标，可以通过localToWorld()方法将局部顶点转换为世界空间位置：

const positionAttr = planes[0].geometry.attributes.position;
const tempVertex = new THREE.Vector3();

// 遍历所有顶点，计算变换后的位置
for (let i = 0; i < positionAttr.count; i++) {
  tempVertex.fromBufferAttribute(positionAttr, i);
  // 将局部顶点坐标转换为经过Mesh变换后的世界坐标
  planes[0].localToWorld(tempVertex);
  console.log(`顶点${i}变换后位置:`, tempVertex.x, tempVertex.y, tempVertex.z);
}

适用场景说明 #

• 方案1适合需要基于变换后的顶点做后续几何编辑（如切割、合并几何体），或不需要再对Mesh做额外变换的场景。
• 方案2适合仅需临时获取顶点位置（如碰撞检测、实时数据计算），且希望保留原始几何体的场景。

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