A text geometry component for A-Frame VR. The text geometry component (shape) can be paired with the material component (appearance).
Install.
npm install aframe-text-componentRegister.
AFrame = require('aframe-core');
AFrame.registerComponent('text', require('aframe-text-component').component);Use.
<a-scene>
<a-entity text="text: Hello, World!" material="color: blue"></a-entity>
</a-scene>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>
<script src="aframe-core.js"></script>
<script src="aframe-text-component.js"></script>
<script src="myfont.typeface.js"></script>
</head>
<body>
<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>
</body>
</html>Or in JS:
var AFrame = require('aframe-core');
var textComponent = require('aframe-text-component');
AFrame.registerComponent('text', textComponent);
require('./fonts/myfont.typeface');| Property | Description | Default Value |
|---|---|---|
| bevelEnabled | false | |
| bevelSize | 8 | |
| bevelThickness | 12 | |
| curveSegments | 12 | |
| font | helvetiker | |
| height | 0.05 | |
| size | 0.5 | |
| style | normal | |
| text | None | |
| weight | normal |