Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bryik/aframe-bmfont-text-component
A-Frame component for rendering bitmap fonts.
https://github.com/bryik/aframe-bmfont-text-component
aframe sdf text threejs
Last synced: 9 days ago
JSON representation
A-Frame component for rendering bitmap fonts.
- Host: GitHub
- URL: https://github.com/bryik/aframe-bmfont-text-component
- Owner: bryik
- License: mit
- Archived: true
- Created: 2016-06-21T20:13:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-26T20:23:03.000Z (over 6 years ago)
- Last Synced: 2024-09-28T23:42:44.562Z (4 months ago)
- Topics: aframe, sdf, text, threejs
- Language: JavaScript
- Homepage: https://bryik.github.io/aframe-bmfont-text-component/
- Size: 688 KB
- Stars: 62
- Watchers: 6
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**This is an old component!** A-Frame 0.5.0 and up includes SDF text as [a standard component](https://aframe.io/docs/0.5.0/components/text.html). Use that instead!
## aframe-bmfont-text-component
**Works with A-Frame version 0.3.0.**
This component is useful for rendering bitmap and signed distance field font text in [A-Frame](https://aframe.io). Basically, it wraps Matt DesLauriers' [three-bmfont-text](https://github.com/Jam3/three-bmfont-text) and [load-bmfont](https://github.com/Jam3/load-bmfont).
## Properties
| Property | Description | Default Value |
|:-------------:|:----------------------------:|:---------------------:|
| text | the text you want to appear | None |
| width | width of the text box | None |
| align | 'left', 'center', 'right' | left |
| letterSpacing | the letter spacing in pixels | 0 |
| lineHeight | the line height in pixels | 38 |
| fnt | path to 'fnt' file | https://... |
| fntImage | path to font image file | https://... |
| mode | 'pre' and 'nowrap' | 'normal' |
| color | by RGB, hex, or name | #000 |
| opacity | Extent of transparency. | 1.0 |
More details on these properties [here](https://github.com/Jam3/three-bmfont-text#usage).
Explanation of 'mode' property [here](https://github.com/mattdesl/word-wrapper).
## Usage
Write some text:
```html
```
To change the size of the text, use the [scale](https://aframe.io/docs/0.2.0/components/scale.html) component or position the text closer or further away.
Text can be wrapped by specifying width, but I'm not sure what units three-bmfont-text uses. You will have to play around a bit.
## Custom Fonts
A guide for generating SDF fonts can be found [here](https://github.com/libgdx/libgdx/wiki/Distance-field-fonts); here is an example comparing [Arial Black and DejaVu](http://i.imgur.com/iWtXHm5.png). Bitmap fonts also work, but do not look nearly as good.
Different fonts can be specified with the 'fnt' and 'fntImage' properties.
```html
```
Thanks to [jsDelivr](https://www.jsdelivr.com), these default to hosted "DejaVu-sdf.fnt" and "DejaVu-sdf.png" files.
## Limitations
This component does not make use of all of the features of [three-bmfont-text](https://github.com/Jam3/three-bmfont-text) and its sister modules, if you require more advanced functionality such as tabSize and start and end indices, I recommend forking this component and modifying it. Pull requests are welcome, but please include a test example.
Bitmap font rendering limits you to the characters included in the font (Unicode this is not). SDF font (in particular) tends to smooth sharp edges though [there are ways around this](https://lambdacube3d.wordpress.com/2014/11/12/playing-around-with-font-rendering/).
#### Additional Information
If you are interested in text rendering in WebGL/ThreeJS/A-Frame and want to learn more, I recommend reading the documentation for [three-bmfont-text](https://github.com/Jam3/three-bmfont-text).
Here are some additional resources:
- ['It’s 2015 and drawing text is still hard (WebGL, ThreeJS)' by Parris Khachi](https://www.eventbrite.com/engineering/its-2015-and-drawing-text-is-still-hard-webgl-threejs/)
- [Valve's original paper](http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf)
- ['Hacking with THREE.js' by Matt DesLauriers](http://slides.com/mattdeslauriers/hacking-with-three-js#/13)
## Installation
#### Browser
Install and use by directly including the [browser files](dist):
```html
My A-Frame Scene
```
#### NPM
Install via NPM:
```bash
npm install aframe-bmfont-text-component
```
Then register and use.
```js
require('aframe');
require('aframe-bmfont-text-component');
```