Skip to content


Switch branches/tags


Failed to load latest commit information.
Latest commit message
Commit time
Mar 1, 2018
Feb 9, 2022
Feb 16, 2022
Feb 16, 2022


NPM package Build Size NPM Downloads

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';


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

or even

<script src="//"></script>


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

const myScene = new THREE.Scene();

API reference


SpriteText ([text, textHeight, color])


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

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