/three-spritetext

A sprite based text component for ThreeJS

Primary LanguageJavaScriptMIT LicenseMIT

three-spritetext

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

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

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