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.