three-spritetext

To use three-spritetext in your ThreeJS project, you can install it via npm or include it via a CDN script tag. The component creates a Sprite that always faces the camera, with the text rendered onto a canvas texture.

// Using npm
import SpriteText from 'three-spritetext';

// Or using a script tag
// <script src="//cdn.jsdelivr.net/npm/three-spritetext"></script>

const myText = new SpriteText('My text');
const myScene = new THREE.Scene();
myScene.add(myText);

You can duplicate a SpriteText instance using the .clone() or .copy() methods.

• clone(): Creates a new instance of the same class and copies all properties from the current instance.
• copy(source): Copies all properties from a source instance into the current instance. This method also calls the base THREE.Sprite.prototype.copy to ensure standard Three.js properties are synchronized.

const original = new SpriteText('Original', 10, 'white');
original.fontSize = 150;

// Create a clone
const clone = original.clone();

// Copy properties from one to another
const another = new SpriteText();
another.copy(original);

The SpriteText class (exported as the default export) extends THREE.Sprite and allows you to render text onto a canvas texture that is applied to a sprite. This is useful for creating 3D labels, UI elements, or floating text in a Three.js scene.

To use it, instantiate the class with the desired text, height, and color. Note that changing properties like text, textHeight, or color will automatically trigger a canvas regeneration to update the texture.

import SpriteText from 'three-spritetext';

// Create a sprite with text 'Hello World', height 10, and white color
const spriteText = new SpriteText('Hello World', 10, 'rgba(255, 255, 255, 1)');

// Add it to your Three.js scene
scene.add(spriteText);

The SpriteText constructor initializes a new text sprite. You can pass initial values for the text content, height, and color.

Signature: new SpriteText(text, textHeight, color)

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