aframe-textwrap-component

Text wrapping for AFrame draw.

Usage no npm install needed!

<script type="module">
  import aframeTextwrapComponent from 'https://cdn.skypack.dev/aframe-textwrap-component';
</script>

README

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.