动态修改PlaneGeometry顶点后Mesh位置异常，如何修正？

嘿，这个问题其实是对Three.js里网格位置和几何体顶点关系的理解误区，我来给你拆解清楚～

首先要明确：mesh.position是网格在世界坐标系中的偏移量，而你修改的是几何体的顶点——这些顶点是相对于网格自身的局部坐标系的。所以哪怕你把几何体的顶点都挪了位置，网格的position本身不会自动跟着变，因为它记录的是网格整体的偏移，不是几何体的中心位置。

如果想要让mesh.position更新为修改后几何体的中心位置，你需要手动计算几何体的边界盒，然后通过调整几何体顶点和网格位置来实现，具体步骤如下：

1. 计算几何体的边界盒：修改顶点后，先调用computeBoundingBox()来重新计算几何体的包围盒，这样才能得到新的顶点范围。
2. 获取几何体的中心：通过包围盒的getCenter()方法拿到修改后几何体的中心坐标。
3. 调整几何体顶点与网格位置：把几何体的顶点反向平移，让它的中心回到网格的局部原点，同时把网格的position设为刚才获取的中心坐标——这样视觉上几何体的位置和你修改顶点后的效果一致，但mesh.position就会是正确的中心位置了。

具体代码实现：

// 你原来修改顶点的代码
var geometry = new THREE.PlaneGeometry(500, 500); 
geometry.dynamic = true; 
var material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide }); 
var plane = new THREE.Mesh(geometry, material); 
scene.add(plane); 

geometry.vertices[0].x += 15; 
geometry.vertices[1].x += 15; 
geometry.vertices[2].x += 10; 
geometry.vertices[3].x += 10; 
geometry.verticesNeedUpdate = true;

// 新增的更新位置逻辑
// 计算边界盒
geometry.computeBoundingBox();
const newCenter = new THREE.Vector3();
geometry.boundingBox.getCenter(newCenter);

// 将几何体顶点平移回局部原点
geometry.translate(-newCenter.x, -newCenter.y, -newCenter.z);

// 更新网格的位置为几何体原来的中心
plane.position.copy(newCenter);

这样操作后，plane.position就会显示为修改后几何体的中心坐标了。另外要注意，如果你只是想获取几何体的中心位置而不需要调整网格，直接调用computeBoundingBox()和getCenter()就能拿到，不需要平移顶点。

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