three.textsprite

THREE.TextSprite

class THREE.TextSprite extends THREE.Sprite

An instance of TextSprite automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas.

demo

Try it out!

dependencies

• THREE.TextTexture

setup

npm

npm i three.textsprite

ES module

import TextSprite from 'three.textsprite';

browser

<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/three.texttexture"></script>
<script src="https://unpkg.com/three.textsprite"></script>

The class TextSprite will be available under the namespace THREE.

members

.constructor({
  material,
  maxFontSize,
  minFontSize,
  redrawInterval,
  textSize,
  texture,
})

argument	description
material	The parameters to pass to the constructor of SpriteMaterial.
texture	The parameters to pass to the constructor of TextTexture.

let sprite = new THREE.TextSprite({
  material: {
    color: 0xffbbff,
    fog: true,
  },
  redrawInterval: 250,
  textSize: 10,
  texture: {
    fontFamily: 'Arial, Helvetica, sans-serif',
    text: 'Be happy. Be bright. Be you.',
  },  
});
scene.add(sprite);

---

.isTextSprite = true

Used to check whether this is an instance of TextSprite.

You should not change this, as it is used internally for optimisation.

---

.textSize = 1

The size of the text.

---

.redrawInterval = 1

The minimum time that must elapse before the canvas is redrawn.

---

.minFontSize = 0

The minimum font size.

---

.maxFontSize = Infinity

The maximum font size.

---

.dispose()

Disposes the texture and the material.