THREE.js中线条加入Group后顶点未更新的技术咨询

嘿，你遇到的其实是Three.js坐标系统的典型特性——咱们一步步拆解解决：

首先得明确：你看到顶点数据没变化是正常现象！Three.js里，几何体的顶点存储的是子对象（也就是你的itemLine）自身的局部坐标，Group的位置变换是通过对象层级的变换矩阵来计算最终位置的，不会直接修改子对象的几何体顶点数据。这种设计能让你高效调整整个组的位置、旋转、缩放，不用逐个修改顶点，灵活性拉满。

如果你需要获取考虑Group偏移后的坐标，分两种场景处理：

1. 获取顶点的世界坐标（相对于场景原点） #

完全不需要修改几何体，用Three.js内置的坐标转换方法就能拿到正确结果：

// 以第一个顶点为例，创建临时向量存储坐标
const worldPos = new THREE.Vector3().copy(geometry.vertices[0]);
// 将Line的局部坐标转换为世界坐标（自动包含Group的位置/旋转/缩放变换）
itemLine.localToWorld(worldPos);
console.log(worldPos); // 这就是你想要的带Group偏移的世界坐标

这种方法比手动计算更可靠，能自动适配Group后续的任何变换调整。

2. 如果非要修改几何体顶点（不推荐） #

如果你确实需要让几何体的顶点直接包含Group的偏移（比如后续不需要再调整Group位置了），可以手动遍历顶点更新，记得标记顶点数据需要刷新：

// 遍历所有顶点，叠加Group的位置偏移
geometry.vertices.forEach(vertex => {
  vertex.add(item.position);
});
// 告诉Three.js顶点数据已更新，需要重新渲染
geometry.verticesNeedUpdate = true;

⚠️ 注意：这种方法不推荐，因为之后修改Group的位置、旋转，顶点不会自动同步，彻底失去了层级变换的灵活性。

额外提示：推荐使用BufferGeometry #

现在Three.js已经逐步废弃THREE.Geometry，推荐使用THREE.BufferGeometry（性能更优）。如果用BufferGeometry，获取顶点的方式是：

const positions = geometry.attributes.position.array;
// 第一个顶点的x/y/z对应：positions[0], positions[1], positions[2]

转换世界坐标的方法和之前一样，用localToWorld即可。

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