My A-Frame Scene

## aframe-text-component A text geometry component for [A-Frame](https://aframe.io). The text geometry component wraps [THREE.TextGeometry](https://threejs.org/docs/?q=textge#Reference/Geometries/TextGeometry). ![screenshot](https://cloud.githubusercontent.com/assets/674727/21373560/c4c7507c-c6d4-11e6-86a5-88cb3ae8d0cb.png) ## Properties | Property | Description | Default Value | | -------- | ----------- | ------------- | | bevelEnabled | | false | | bevelSize | | 8 | | bevelThickness | | 12 | | curveSegments | | 12 | | font | Path to a typeface.json file or selector to ``. | 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](dist): ```html My A-Frame Scene

``` #### NPM Installation Install via NPM: ```bash npm install aframe-text-component ``` Then register and use. ```js 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](http://gero3.github.io/facetype.js/). You can also find some sample generated fonts in the `examples/fonts` directory in the [three.js repository](https://github.com/mrdoob/three.js). 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 `` and point to the font with a selector. For example in HTML: ```html My A-Frame Scene

``` 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: ```js 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: ```html ``` See the [Vaporwave Example](https://ngokevin.github.io/kframe/components/text/examples/vaporwave/) by [Ada Rose Edwards](https://twitter.com/lady_ada_king) for an example on applying materials.