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.



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"

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?