three-spritetext

three-spritetext

A sprite based text component for ThreeJS. The text is drawn to canvas, converted into a Texture and then used as a material on a Sprite. Because a sprite is being used, the text will always face the camera, and has its orientation fixed relative to the camera.

Quick start

import SpriteText from 'three-spritetext';

or

var SpriteText = require('three-spritetext');

or even

<script src="//unpkg.com/three-spritetext"></script>

then

var myText = new SpriteText('My text');

var myScene = new THREE.Scene();
myScene.add(myText);

API reference

Constructor

SpriteText ([text, textHeight, color])

Properties

Property	Description	Default
text	The text to be displayed on the sprite. Supports center aligned multi-lines, using the \n character to define line breaks.
textHeight	The height of the text.	10
color	The color of the text.	white
fontFace	The font type of the text.	Arial
fontSize	The resolution of the text, in terms of vertical number of pixels. Lower values may cause text to look blurry. Higher values will yield sharper text, at the cost of performance.	90
fontWeight	The weight (or boldness) of the font. The weights available depend on the font-family you are using.	normal

Giving Back

If this project has helped you and you'd like to contribute back, you can always buy me a ☕!