Bounding Boxes
A bounding box in Babylon.js is an invisible box that encloses a mesh, helping to determine its spatial boundaries. It is often used for collision detection, picking, and efficient rendering culling (determining what objects are visible to the camera).
Single mesh
To draw the bounding box around a single mesh, all you need to do is set the showBoundingBox property to true.
<>
<sphere name='sphere' position={new Vector3(0, 0.5, 0)} showBoundingBox />
<ground name='ground' options={{ width: 5, height: 5 }} />
</>
Multiple meshes (manual)
To draw bounding boxes around multiple meshes, we’re going to get the minimum and maximum values of the bounding information of both meshes and compare them with special methods that compares two vector 3 values and gives you the minimum and maximum values. Then we’ll set the sphere’s bounding information to this new min and max. In the example we have one ground and two sphere, sphere-2 is intentionally excluded from the bounding boxes.
useEffect(() => {
const sphere = sphereRef.current!;
// compute the world matrix of sphere because it is first lift up (0.5 on Y-axis) and then add to parent
sphereRef.current.computeWorldMatrix();
// really important world coordinates otherwise the bounding box is set from local space (parent has the pivot in the origin)
const sphereMin = sphere.getBoundingInfo().boundingBox.minimumWorld;
const sphereMax = sphere.getBoundingInfo().boundingBox.maximumWorld;
const groundMin = groundRef.current!.getBoundingInfo().boundingBox.minimumWorld;
const groundMax = groundRef.current!.getBoundingInfo().boundingBox.maximumWorld;
const newMin = Vector3.Minimize(sphereMin, groundMin);
const newMax = Vector3.Maximize(sphereMax, groundMax);
parentRef.current?.setBoundingInfo(new BoundingInfo(newMin, newMax));
}, []);
// ...
<mesh ref={parentRef} name='parent' showBoundingBox>
<sphere ref={sphereRef} name='sphere' position={new Vector3(0, 0.5, 0)} />
<sphere name='sphere-2' position={new Vector3(5, 0.5, 0)} />
<ground ref={groundRef} name='ground' options={{ width: 5, height: 5 }} />
</mesh>Multiple meshes (dynamic)
If we want to draw the bounding boxes around all meshes, we can do in in a dynamic way by calling getHierarchyBoundingVectors method on the parent node.
useEffect(() => {
const { min, max } = parentRef.current!.getHierarchyBoundingVectors();
parentRef.current?.setBoundingInfo(new BoundingInfo(min, max));
}, []);
// ...
<mesh ref={parentRef} name='parent' showBoundingBox>
<sphere name='sphere' position={new Vector3(0, 0.5, 0)} />
<sphere name='sphere-2' position={new Vector3(5, 0.5, 0)} />
<ground name='ground' options={{ width: 5, height: 5 }} />
</mesh>Learn More
You can also update the bounding box everytime the parent receives a new child, for this and for additional context, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/mesh/displayBoundingBoxes.
