Labelling r3f objects using HTML

A huge advantage of using React and r3f to manage a 3D scene is that you can include things that are HTML and CSS as well as 3D objects by using Drei's Html component. This enables lots of possibilities for applications that add data alongside models, as well as things like using HTML for the GUI elements on a page.

The Html component aligns the CSS transform of a DOM node on the page with the camera and position of a 3D object, so the node moves with the object.

Using HTML in your scene is incredibly simple.

Include the HTML component first;

import { Html } from "@react-three/drei/Html";

Then wrap the HTML you need to use in the Html component.

<Html>
    <div class="label">Torus</div>
</Html>

Putting this together results in a label that moves with the object.