lborgman/three-spritetext

A sprite based text component for ThreeJS

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 using a script tag

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

then

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

const 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 fill color of the text.	white
backgroundColor	The canvas background color. A falsy value makes the canvas transparent.	false
strokeWidth	The width of the text stroke, proportional to the text size. A value of 0 disables stroking.	0
strokeColor	The color of the text stroke.	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
padding	The amount of padding between the text and the canvas edge. Supports either single values, or a tuple with two values representing horizontal and vertical padding.	0
borderWidth	The size of the border around the canvas. Supports either single values, or a tuple with two values representing horizontal and vertical border size.	0
borderRadius	The corner radius of the border. Supports either single values, or an array of four values representing the four corners in order: top-left, top-right, bottom-right, bottom-left.	0
borderColor	The color of the border.	white

Giving Back

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