CODEWITHSUNDEEP
javascriptaframevirtual-reality
Angelo Joseph Salvador
Angelo Joseph Salvador

Reputation: 352

How to display a paragraph / block of words using A-Frame?

I am currently developing a tool in my work which will be having augmented reality (AR.js). My problem is that I must display a paragraph of text using A-frame. My question is how to do it?

I am using the <a-text> tag in displaying the text. If there is only 1 line of text that I am displaying, I have no difficulty in displaying it but if I have many words and I needed to display it, the lines overlaps with each other.

Here is a sample output of a single line of text:

enter image description here Here is the output of the paragraph. The lines of the paragraph overlaps with each other.

enter image description here

P.S.

Here is my code. I am separating the paragraph first in a controller to smaller strings that the monitor can display.

@if (isset($value->words))
    @foreach ($value->words as $key => $words)
        <a-text value="{{ $words }}" rotation="-90 0 0"></a-text>
    @endforeach
@else
    <a-text value="{{ $value->text }}" rotation="-90 0 0"></a-text>
@endif

It is in Blade. The $value->words contains the array of strings that has been separated and the $value->text is the original text.

Upvotes: 0

Views: 1332

Answers (2)

ngokevin
ngokevin

Reputation: 13233

If you want multiple entities layed out, you can use the layout component https://github.com/ngokevin/kframe/tree/master/components/layout to automatically lay them out in however you need (e.g., column).

<a-entity layout="type: box; columns: 1; margin: -0.05">
  <a-entity id="line1" layout="type: line; margin: 0.5">
    <a-entity text="value: 1"></a-entity>
    <a-entity text="value: 1.1"></a-entity>
  </a-entity>

  <a-entity id="line2" text="value: 2"></a-entity>

  <a-entity id="line3" text="value: 3"></a-entity>
</a-entity>

Else you can use \n break text="value: a\nb\n\c" or specify text="wrapCount: 80"

Upvotes: 1

Diego Marcos
Diego Marcos

Reputation: 4585

Word layout and Line wrapping only works in the context of a single <a-text> tag (https://glitch.com/edit/#!/statuesque-friend?path=index.html:11:29):

<a-entity position="0 0 -1" text="width: 2; lineHeight: 50; letterSpacing: 5; color: white; value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam"> </a-entity>

It seems that your foreach is generating multiple <a-text> tags, one for each word, all in the same position so they overlap. My recommendation is to concatenate all those words on a single string and use a single <a-text> or you will have to manually calculate and assign the position to each of them so they don't overlap.

Upvotes: 1

Related Questions