To communicate something to the viewer inside the environment, we can use the <a-text> primitive. Texts can be game-like instruction, tell a story, or label objects in the world.

In 2D web development, displaying some text is rather simple because the browser’s renderer and layout engine handle everything. In a 3D context, we don’t have those luxuries.

There are several ways to render text, each with its own advantages and disadvantages. A-Frame comes with a signed distance field (SDF) text implementation that is relatively sharp, loads faster, and easy to use.

Here’s an example using <a-text>:

<a-text 
  value="Hello A-Frame!"
  color="#BBB"
  align="left"
  position="-0.9 0.2 -3"
  scale="1.5 1.5 1.5"></a-text>

Note that there are two new attributes that we haven’t seen:

• value="Hello A-Frame!"
• align="left"

This will make the text Hello A-Frame! appear in the color gray and align it to the left.

Check out the <a-text> documentation for more info.