AFrame Text Wrap Component

Wrappable text as a material for an A-Frame VR entity. Requires draw.

All attributes are listed below.

Installation

npm i aframe-draw-component --save
npm i aframe-textwrap-component --save

Usage

Register the component with AFrame:

var AFRAME = require("aframe-core");
var draw = require("aframe-draw-component").component;
var textwrap = require("aframe-textwrap-component").component;
AFRAME.registerComponent("draw", draw);
AFRAME.registerComponent("textwrap", textwrap);

Then integrate it on an entity:

<a-entity id="box" geometry="primitive: box" position="0 2 0" draw="background: #D7E8FF" textwrap="textAlign: center; x: 128; y: 128; text: Hello world!"></a-entity>

Properties

All properties have a default! :)

Property	Description
text	the text that should be wrapped. If your text contains a colon (:) or a semicolon (;), you can escape it using url(my:text;).
x	canvas x position of the text (upper left corner)
y	canvas y position of the text (upper left corner)
font	css font string (see here)
color	color of the text
textAlign	text alignment (see here)
textBaseline	text baseline (see here)
direction	text direction (see here)
width	width of text block in pixels
lineHeight	line height (vertical spacing) in pixels

Additional Info

• Wrapping function is from here.