Text wrapping for AFrame draw.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
examples
tests
.gitignore
LICENSE
README.md
browser.js
demo.png
index.js
package.json

README.md

AFrame Text Wrap Component

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

demo

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.