/three-spritetext

A sprite based text component for ThreeJS

Primary LanguageJavaScriptMIT LicenseMIT

three-spritetext

NPM package Build Size Dependencies

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 have 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.
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

Giving Back

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