aframe-text-component
v0.4.2
Published
Geometry-based text in A-Frame
Downloads
103
Readme
aframe-text-component
A text geometry component for A-Frame. The text geometry component wraps THREE.TextGeometry.
Properties
| Property | Description | Default Value |
| -------- | ----------- | ------------- |
| bevelEnabled | | false |
| bevelSize | | 8 |
| bevelThickness | | 12 |
| curveSegments | | 12 |
| font | Path to a typeface.json file or selector to <a-asset-item>. | https://rawgit.com/ngokevin/kframe/master/components/text/lib/helvetiker_regular.typeface.json |
| height | | 0.05 |
| size | | 0.5 |
| style | | normal |
| text | | None |
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-componentThen 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.