<p>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 <code>Html</code> 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.</p>
<p>The <code>Html</code> 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.</p>
<p>Using HTML in your scene is incredibly simple.</p>
<p>Include the HTML component first;</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { Html } <span class="hljs-keyword">from</span> <span class="hljs-string">"@react-three/drei/Html"</span>;
</code></pre>
<p>Then wrap the HTML you need to use in the <code>Html</code> component.</p>
<pre><code class="lang-js">&lt;Html&gt;
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label"</span>&gt;</span>Torus<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
&lt;/Html&gt;
</code></pre>
<p>Putting this together results in a label that moves with the object.</p>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codesandbox.io/s/html-labels-d05zm">https://codesandbox.io/s/html-labels-d05zm</a></div>


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;

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

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

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

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

%[https://codesandbox.io/s/html-labels-d05zm]

Labelling r3f objects using HTML