Currently, I am developing a visual components designer that includes a functionality to group objects together under a specific name. When any of the grouped objects is selected, a red box should be displayed around them.
However, I am facing an issue where adding the red box as a LineSegments object to the scene causes the original objects to be removed. I have checked my code thoroughly and I am certain that I am not removing them anywhere else in my code.
Although my code is quite lengthy, I will share the relevant snippets with you.
Snippet for creating the wireframe:
const createGroupBoundingBox = (group, groupName) => {
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(
groupName.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,
}
};
return newGroup;
};
Snippet for adding the wireframe to the scene:
const bbox = createGroupBoundingBox(group, newGroup.name);
scene.add(bbox);