three.texttexture v22.0.0

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: '',
})

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