Skip to content

Latest commit

 

History

History
160 lines (108 loc) · 5.61 KB

0300-text.md

File metadata and controls

160 lines (108 loc) · 5.61 KB
title
Text

Text

:::note warning Controlling text is hard and limited with A-Frame. In addition, the documentation for text is not very complete. Ask for help if you are unable to work the text as you need. :::

:::example 0300-text-01

Text can be added with the <a-text> primitive:

<a-text position="0 2 -2" value="Hello, A-Frame World!" align="center"></a-text>

You specify the text in the value attribute and you can position it just like any other primitive.

Color can also be specified just like in any other primitive.

Sides

An important thing to notice about text is that, by default, text is seen only from the front side. Try navigating to the back of the box in example :::ref 0300-text-01 and check that the text seems to disappear from that perspective (Figure 1).

:::imgexample 0300-text-01 #cameraPos=-1.5,0,-4&cameraRot=-11,-140,0 Figure 1 - Example :::ref 0300-text-01 viewed from the back.

You can control which side of the text is rendered, or whether both are rendered with the side attribute, which can takes the values front (default), back, or double:

<a-text
        position="0 2 -2"
        value="I render from the front!"
        side="front"
      ></a-text>

In :::ref 0300-text-02-sides, notice that you have to move around to see one of the lines of text. Also notice how the third line of text is visible even from the back:

:::example 0300-text-02-sides

:::imgexample 0300-text-02-sides #cameraPos=-1.5,0,-4&cameraRot=-11,-140,0 Figure 2 - Example :::ref 0300-text-02-sides viewed from the back.

Multiple lines of text

Large lines of text (with many characters) will automatically wrap at about 40 characters. In addition you can use the \n characters inside the text to explicitly create a newline:

     <a-text
        position="0 1.5 -2"
        value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.\nNunc tempus arcu semper risus mollis, tempus ultrices sapien mattis.\nPhasellus vel ligula in turpis bibendum consectetur in id diam."
      ></a-text>

:::example 0300-text-03-multiplelines

In :::ref 0300-text-03-multiplelines notice the \n in the beggining of each sentence in the second <a-text>.

You can also control how many characters each line of text will have with the wrap-count attribute. However, please be aware that using wrap-count will automatically change the size of the text as well, so you may need to adjust width as well!

      <a-text
        position="0 1.5 -2"
        value="Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nunc tempus arcu semper risus mollis, tempus ultrices sapien mattis.Phasellus vel ligula in turpis bibendum consectetur in id diam."
        wrap-count="20"
        width="2.5"
      ></a-text>

:::example 0300-text-04-wrapcount

Aligning

Text can be aligned to the left, center, or right sides. This is defined with the align attribute:

      <a-text
        position="0 2 -2"
        value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus arcu semper risus mollis, tempus ultrices sapien mattis."
        align="center"
      ></a-text>

In example :::ref 0300-text-05-align you can see the three align options in effect:

:::example 0300-text-05-align

Notice how in example :::ref 0300-text-05-align the position is specify is also aligned with the side of the being being aligned (the left, the center, and the right). You may also position the text using a different reference side. For example you could have left-aligned text positioned by its right side. This is done with the anchor attribute:

      <a-text
        position="0 3 -2"
        value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus arcu semper risus mollis, tempus ultrices sapien mattis."
        align="left"
        anchor="right"
      ></a-text>

In example :::ref 0300-text-06-alignanchor the text is aligned as in the previous example, but it is positioned with reference to its right side in all three cases:

:::example 0300-text-06-alignanchor

Sizing

Although not correctly documented in the A-Frame website, the current default width for text is 5 meters. This can be changed by specifying the width attribute:

     <a-text
        position="-2.5 2 -2"
        value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
              width="2.5"
      ></a-text>

Notice in the following example that the exact size of the line of text is impossible to set, but we can still control the size of the text. A background box with 5 meters wide is placed at the back for reference:

:::example 0300-text-07-sizing

Exercises

Text-01

  1. Based on example :::ref 0300-text-01
  2. Try adding and positioning another line of text.
  3. Can you rotate it to align it to the side of the cube?

:::exercise https://aframe-usj-exercises.glitch.me/exercises/text-01.html#cameraPos=-1.6,0,-0.6&cameraRot=-1.9,-42,0

Text-02

  1. Create a scene with four text objects placed around the user:
  2. One word in front of the user
  3. Another word to the right of the user
  4. Another word behind the user
  5. Another word to the left of the user

Take care to make sure that all words are facing the user

:::exercise https://aframe-usj-exercises.glitch.me/exercises/text-02.html

Text-03

  1. Create a "wheel" of text as depicted in the following example:

:::exercise https://aframe-usj-exercises.glitch.me/exercises/text-03.html

References