Display an object’s bounding box

Three.js includes a handy BoxHelper to display an object’s bounding box. The constructor takes an object and a color. Here’s the code example from the Three.js docs:

const box = new THREE.BoxHelper(object, 0xffff00);
scene.add(box);

To use with React Three Fiber, the drei package has a useHelper hook to make it easy to use helpers like the BoxHelper. It automatically sets up the helper when the component mounts, and disposes of it when the component unmounts. Here’s the code sample from the drei docs:

const mesh = useRef()
useHelper(mesh, BoxHelper, 'cyan')
useHelper(condition && mesh, BoxHelper, 'red') // you can passe false instead of the object ref to hide the helper

<mesh ref={mesh} ... />