Extract Bounding Box or Sphere of Three.js Geometry

Calculating the spatial boundaries of 3D models is essential for implementing collision detection, centering objects, and framing cameras. This guide demonstrates how to extract both the bounding box (THREE.Box3) and bounding sphere (THREE.Sphere) for single geometries and complex, multi-mesh hierarchies in Three.js.

Extracting Bounding Boxes

A bounding box represents the minimum and maximum coordinates (X, Y, and Z) that enclose a 3D object.

Method 1: For a Single Mesh/Geometry

If you are working with a single THREE.Mesh, you can calculate the bounding box directly from its geometry. By default, Three.js does not calculate bounding volumes automatically to save memory, so you must invoke the computation method first.

// Ensure the bounding box is calculated
mesh.geometry.computeBoundingBox();

// Access the bounding box
const localBox = mesh.geometry.boundingBox;

// Get min and max coordinates
const min = localBox.min;
const max = localBox.max;

Note: This returns the bounding box in local space. If the mesh is scaled, rotated, or translated, these coordinates will not reflect those world space changes.

Method 2: For Complex Hierarchies and Groups (World Space)

For complex geometries (such as imported GLTF models containing multiple nested meshes, groups, or bones), you should use THREE.Box3().setFromObject(). This method automatically traverses the object’s entire hierarchy and computes a bounding box aligned with world space, accounting for all transformations.

const box = new THREE.Box3().setFromObject(complexModel);

// Extract size and center
const size = new THREE.Vector3();
box.getSize(size);

const center = new THREE.Vector3();
box.getCenter(center);

console.log('Size:', size);
console.log('Center:', center);

Extracting Bounding Spheres

A bounding sphere is the smallest sphere that completely encloses an object, defined by a center point and a radius.

Method 1: For a Single Mesh/Geometry

Similar to bounding boxes, you must compute the bounding sphere on the geometry level before accessing it.

// Ensure the bounding sphere is calculated
mesh.geometry.computeBoundingSphere();

// Access the bounding sphere
const localSphere = mesh.geometry.boundingSphere;

console.log('Radius:', localSphere.radius);
console.log('Local Center:', localSphere.center);

Method 2: For Complex Hierarchies and Groups

To calculate the bounding sphere of a complex hierarchy, you must first calculate its Box3 bounding box and then derive the sphere from it. Three.js does not provide a direct setFromObject method for spheres, making this the most accurate approach.

// 1. Calculate the bounding box of the entire group/model
const box = new THREE.Box3().setFromObject(complexModel);

// 2. Instantiate a target Sphere and Vector3
const sphere = new THREE.Sphere();

// 3. Populate the sphere using the bounding box
box.getBoundingSphere(sphere);

console.log('Sphere Center:', sphere.center);
console.log('Sphere Radius:', sphere.radius);