Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm's 300,000 packages pre-installed, including aframe-text-component with all npm packages installed. Try it out:

var aframeTextComponent = require("aframe-text-component")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

aframe-text-component v0.4.2

Geometry-based text in A-Frame

aframe-text-component

A text geometry component for A-Frame. The text geometry component wraps THREE.TextGeometry.

screenshot

Properties

PropertyDescriptionDefault Value
bevelEnabledfalse
bevelSize8
bevelThickness12
curveSegments12
fontPath to a typeface.json file or selector to <a-asset-item>.https://rawgit.com/ngokevin/kframe/master/components/text/lib/helvetiker_regular.typeface.json
height0.05
size0.5
stylenormal
textNone

Usage

Browser Installation

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-text-component@^0.4.1/dist/aframe-text-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-assets>
      <a-asset-item id="optimerBoldFont" src="https://rawgit.com/mrdoob/three.js/dev/examples/fonts/optimer_bold.typeface.json"></a-asset-item>
    </a-assets>

    <a-entity text="text: What's up"></a-entity>
    <a-entity text="text: Dog?; font: #optimerBoldFont"></a-entity>
  </a-scene>
</body>

NPM Installation

Install via NPM:

npm install aframe-text-component

Then register and use.

require('aframe');
require('aframe-text-component');

Using Different Fonts

The text component uses typeface.json files, which are Web Fonts converted to JSON for three.js. Typeface fonts can be generated from fonts using this typeface font generator. You can also find some sample generated fonts in the examples/fonts directory in the three.js repository.

By default, the text geometry component points to Helvetiker (Regular). Each font is fairly large, from at least 60KB to hundreds of KBs.

To include a font for use with the text component, it is recommended to define it in <a-asset-item> and point to the font with a selector.

For example in HTML:

<html>
  <head>
    <title>My A-Frame Scene</title>
    <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-text-component/dist/aframe-text-component.min.js"></script>
    <script src="myfont.typeface.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <a-asset-item id="optimerBoldFont" src="https://rawgit.com/mrdoob/three.js/dev/examples/fonts/optimer_bold.typeface.json"></a-asset-item>
        <a-mixin id="boldFont" text="font: #optimerBoldFont"></a-mixin>
      </a-assets>

      <a-entity mixin="boldFont" text="text: What's up"></a-entity>
      <a-entity text="text: Dog?; font: #optimerBoldFont"></a-entity>
    </a-scene>
  </body>
</html>

Or in JS, we can bundle and set a font directly with setAttribute such that we don't have to XHR the font file separately at runtime:

require('aframe');
require('aframe-text-component');

var fontJson = require('./fonts/myfont.typeface.json');
var el = document.createElement('a-entity');
el.setAttribute('text', {font: fontJson});

Applying a Material

The text geometry component defines just the geometry. We can apply any three.js material to the geometry:

<a-entity text="text: HELLO" material="color: red; src: #texture"></a-entity>

See the Vaporwave Example by Ada Rose Edwards for an example on applying materials.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free