Three.js添加分组包围盒时原对象组消失问题求助

我正在开发一款可视化组件设计器，其中一项功能是将对象按名称分组，当选中分组内任意对象时，需在其周围绘制红色边框。目前遇到的问题是：当把作为LineSegments对象的红色边框添加到Scene（或任何对象）时，原对象组会从场景中消失，我确认代码其他部分没有主动移除它们。

相关代码片段 #

创建线框 #

export const createGroupBoundingBox = (group: Group, gName: string): Group => {
  const newGroup = new Group();
  const box3 = new Box3();

  box3.setFromObject(group);
  // 计算包围盒尺寸
  const dimensions = new Vector3().subVectors(box3.max, box3.min);

  const planeGeometry = new PlaneGeometry(
    dimensions.x + BoundingBoxMargin,
    dimensions.y + BoundingBoxMargin
  );
  // 移动网格中心使其与原对象对齐
  const matrix = new Matrix4().setPosition(
    dimensions.addVectors(box3.min, box3.max).multiplyScalar(0.5)
  );
  planeGeometry.applyMatrix4(matrix);
  // 创建临时网格用于生成边缘几何体
  const mesh = new Mesh(planeGeometry, new MeshBasicMaterial());
  // 生成线框
  const geo = new EdgesGeometry(mesh.geometry);
  const wireframe = new LineSegments(
    geo,
    new LineBasicMaterial({ color: 0xff0000, linewidth: 5.0, side: DoubleSide })
  );
  wireframe.position.setZ(ZIndexForBoundingBox); // 尝试设置层级但无效
  const txt = getText(
    gName.toUpperCase(),
    planeGeometry.attributes.position.array[0],
    planeGeometry.attributes.position.array[1]
  );

  newGroup.add(wireframe);
  newGroup.add(txt);
  newGroup.userData = {
    objectType: ObjectType.boundingBox,
    info: {
      uuid: group.uuid,
      linePoints: dimensions,
    } as unknown as BoundingBoxRef,
  } as unknown as ObjectRef;

  return newGroup;
};

将线框添加到场景 #

const bbox = createGroupBoundingBox(g, newGroup.name);
scene.add(bbox);

分组前后对比 #

排查与解决方案 #

1. 修复向量计算的副作用问题 #

原代码中dimensions.addVectors(box3.min, box3.max)会直接修改dimensions变量（Vector3的方法都是可变的），原本dimensions是包围盒的尺寸（max - min），执行该方法后会被改成min + max，后续依赖这个变量的逻辑可能出错，甚至间接影响原对象组。

替换为更安全的中心计算方式：

// 移除原来的matrix创建代码，改用以下方式
const center = box3.getCenter(new Vector3()); // 直接获取包围盒中心，无副作用
const matrix = new Matrix4().setPosition(center);

2. 确认原对象组的存在状态 #

添加边框后，在控制台打印原对象组的关键属性，排查是否被意外移除或隐藏：

// 在添加边框的代码后加入调试日志
console.log('原对象组可见性:', g.visible);
console.log('原对象组父级:', g.parent);
console.log('场景子元素列表:', scene.children);

• 如果parent为null：说明原对象组被意外从场景中移除，需排查分组逻辑中是否有隐藏的remove操作；
• 如果visible为false：检查是否有其他代码修改了该属性。

3. 避免意外修改原对象组 #

确保createGroupBoundingBox函数中所有操作都基于独立计算或新创建的对象，不要直接修改传入的group参数的任何属性（比如位置、可见性、缩放等）。

4. 修正边框层级的设置逻辑 #

Three.js中没有ZIndex概念，通过调整z位置来让边框显示在顶层是可行的，但需确保该值在相机的可视范围内。例如：

// 假设原对象组的z位置为0，将边框z位置设为1（确保在原对象上方）
wireframe.position.z = 1;

同时检查相机的near和far参数，确保边框的z位置在这个区间内。

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