THREE.TextTexture

class THREE.TextTexture extends THREE.Texture

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

setup

npm

npm i @seregpie/three.text-texture

ES module

import TextTexture from '@seregpie/three.text-texture';

browser

<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/@seregpie/three.text-texture"></script>

The class is globally available as THREE.TextTexture.

usage

let texture = new THREE.TextTexture({
  fillStyle: '#24ff00',
  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({map: texture});
let sprite = new THREE.Sprite(material);
let spriteScale = 10;
texture.redraw();
sprite.scale
  .set(texture.image.width / texture.image.height, 1, 1)
  .multiplyScalar(spriteScale);
scene.add(sprite);

Update the texture.

texture.fontFamily = 'Arial, Helvetica, sans-serif';
texture.text = [
  'When this blazing sun is gone,',
  'When he nothing shines upon,',
  'Then you show your little light,',
  'Twinkle, twinkle, through the night.',
].join('\n');
texture.redraw();
sprite.scale
  .set(texture.image.width / texture.image.height, 1, 1)
  .multiplyScalar(spriteScale);

members

constructor

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

properties

.isTextTexture = true

Used to check whether this is an instance of TextTexture.

.text

.fontFamily

.fontSize

.fontWeight

.fontVariant

.fontStyle

.fillStyle

.strokeWidth

.strokeStyle

.align

.lineGap

.padding

.lines

read-only

The text splitted by the newline character.

.width

read-only

The width. The value is relative to the font size.

.height

read-only

The height. The value is relative to the font size.

methods

.redraw()

Redraws the image.

.computeOptimalFontSize(object, renderer, camera, needsPowerOfTwo = false)

Computes the optimal font size depending on the distance of the object to the camera and the size of the renderer DOM element.

Returns the computed font size.

.computeAndSetOptimalFontSize(...args)

Sets fontSize to the value returned by the function computeOptimalFontSize.

see also

• THREE.TextSprite