Learn
Building the Scene
Text

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

1.

Let’s add a welcome message in the 3D world.

Add an <a-text> with:

  • value of "Welcome!"
  • color of #FFD500
  • align of center
  • position of "0 3 -4"
Folder Icon

Take this course for free

Already have an account?