Three.js BufferGeometry顶点转世界坐标 移动物体后边线绘制错位如何解决

你的操作存在两个核心问题：

• 仅在初始化阶段完成了一次坐标转换和线段生成，后续物体位姿（位置/旋转/缩放）发生变化时，没有同步更新线段的顶点数据，导致线段停留在原位置
• 手动提取面、去重边线、转换坐标的流程冗余，容易出现遗漏操作的错误，Three.js有内置工具可以直接实现需求

方案1：使用内置API生成边线（推荐） #

直接用Three.js内置的EdgesGeometry生成物体边线，把边线作为子对象挂载到立方体上，会自动跟随立方体移动、旋转、缩放，不需要手动处理坐标转换：

// 创建立方体
const cube = new THREE.Mesh(
  new THREE.BoxBufferGeometry(1000, 1000, 1000),
  new THREE.MeshBasicMaterial({
    color: 'red',
    transparent: true,
    opacity: 0.4
  })
);
scene.add(cube);
// 移动立方体
cube.position.set(100, 100, 100);

// 生成边线
const edges = new THREE.EdgesGeometry(cube.geometry);
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x0000ff }));
// 把边线作为子对象加到立方体上，自动同步位姿
cube.add(line);

方案2：保留自定义生成逻辑的修正方法 #

如果你一定要保留自己的提取面、生成线段的逻辑，按以下要求修改即可：

• 不需要手动做局部坐标转世界坐标的操作，生成线段后直接挂载为立方体的子对象，Three.js会自动处理坐标同步
• 如果要把线段加到场景根节点，每次修改立方体位姿后，都要先调用cube.updateMatrixWorld(true)，再重新把所有顶点转成世界坐标，最后更新线段的geometry顶点数据

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