three.texttexture

THREE.TextTexture

class THREE.TextTexture extends THREE.Texture

An instance of TextTexture is a texture with the drawn text.

demo

Try it out!

setup

npm

npm i three.texttexture

es6

import TextTexture from 'three.texttexture';

node

let TextTexture = require('three.texttexture');

browser

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

The module is globally available as THREE.TextTexture.

members

constructor

new THREE.TextTexture({
  align: 'center',
  createCanvas() { /*...*/ },
  fillStyle: '#fff',
  fontFamily: 'sans-serif',
  fontSize: 16,
  fontStyle: 'normal',
  fontVariant: 'normal',
  fontWeight: 'normal',
  lineGap: 0.15,
  loadFontFace(family, style, variant, weight) { /*...*/ },
  padding: 0.25,
  strokeStyle: '#000',
  strokeWidth: 0,
  text: '',
})

argument	description
align	The horizontal text alignment. Possible values are 'center', 'left' and 'right'.
createCanvas	A function to create a new Canvas instance.
fillStyle	The fill color or style.
fontFamily	The font family.
fontSize	The font size.
fontStyle	The font style.
fontVariant	The font variant.
fontWeight	The font weight.
lineGap	The vertical distance between the text lines. The value is relative to the font size.
loadFontFace	A function to load a font face.
padding	The space around the text. The value is relative to the font size.
strokeStyle	The stroke color or style.
strokeWidth	The stroke width. The value is relative to the font size.
text	The text.

let texture = new THREE.TextTexture({
  fontFamily: '"Times New Roman", Times, serif',
  fontSize: 32,
  fontStyle: 'italic',
  text: [
    'Twinkle, twinkle, little star,',
    'How I wonder what you are!',
    'Up above the world so high,',
    'Like a diamond in the sky.',
  ].join('\n'),
});
let material = new THREE.SpriteMaterial({
  color: 0xffffbb,
  map: texture,
});
let sprite = new THREE.Sprite(material);
await texture.redraw();
sprite.scale.setX(texture.image.width / texture.image.height).multiplyScalar(10);
scene.add(sprite);

properties

.text

---

.lines

read-only

The text splitted by the newline character.

---

.fontFamily

---

.fontSize

---

.fontWeight

---

.fontVariant

---

.fontStyle

---

.fillStyle

---

.strokeWidth

---

.strokeStyle

---

.align

---

.lineGap

---

.padding

---

.createCanvas

---

.loadFontFace

---

Provide a custom loadFontFace function to support the older browsers.

loadFontFace(family, style, variant, weight) {
  return (new FontFaceObserver(family, {style, weight})).load();
}

methods

.redraw()

Returns a Promise that resolves when the image is redrawn.

see also

• THREE.TextSprite