Text wrapping for AFrame draw.
Latest commit 266edf2 Mar 24, 2016 @maxkrieger 1.0.1
Failed to load latest commit information.
dist Remove boilerplate example from dist. Mar 23, 2016
examples changed words Feb 24, 2016
tests Initial commit Feb 19, 2016
.gitignore Initial commit Feb 19, 2016
LICENSE Initial commit Feb 19, 2016
README.md Initial commit Feb 19, 2016
browser.js Fix component name in browser.js, recompile dist. Mar 23, 2016
demo.png Initial commit Feb 19, 2016
index.js remove comment Feb 24, 2016
package.json 1.0.1 Mar 23, 2016


AFrame Text Wrap Component

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


All attributes are listed below.


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


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>


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.