A text geometry component for A-Frame VR. The text geometry component (shape) can be paired with the material component (appearance).
| Property | Description | Default Value |
|---|---|---|
| bevelEnabled | false | |
| bevelSize | 8 | |
| bevelThickness | 12 | |
| curveSegments | 12 | |
| font | helvetiker | |
| height | 0.05 | |
| size | 0.5 | |
| style | normal | |
| text | None |
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
<script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity text="text: What's up"></a-entity>
</a-scene>
</body>Install via NPM:
npm install aframe-text-componentThen register and use.
require('aframe');
require('aframe-text-component');The text component uses typeface.js, fonts defined in JS files for three.js.
typeface fonts can be generated from regular fonts using this typeface
font generator. You can also find some
sample generated fonts, currently in the examples/fonts directory in the three.js
repository.
By default, the text component only comes with one typeface font, 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, append or require the
typeface font after this component. This component uses FontUtils which
should be initialized before adding fonts.
For example in HTML:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
<script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
<script src="myfont.typeface.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-mixin id="font" text="font: myfont"></a-mixin>
</a-assets>
<a-entity mixin="font" text="text: Hello"></a-entity>
<a-entity mixin="font" text="text: World"></a-entity>
</a-scene>
</body>
</html>Or in JS:
require('aframe');
require('aframe-text-component');
require('./fonts/myfont.typeface');