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 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:
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.
Let’s add a welcome message in the 3D world.
"0 3 -4"