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.
Instructions
Let’s add a welcome message in the 3D world.
Add an <a-text>
with:
value
of"Welcome!"
color
of#FFD500
align
ofcenter
position
of"0 3 -4"