@bellapps/three.text-sprite v1.0.0

THREE.TextSprite

class THREE.TextSprite extends THREE.Sprite

Computes the optimal font size depending on the distance to the camera and the size of the renderer canvas.

demo

load index.html

dependencies

• THREE.TextTexture

setup

npm

npm i @bellapps/three.text-sprite

ES module

import TextSprite from '@bellapps/three.text-sprite';

browser

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

The class is globally available as THREE.TextSprite.

usage

let sprite = new THREE.TextSprite({
  fillStyle: '#24ff00',
  fontFamily: '"Times New Roman", Times, serif',
  fontSize: 12,
  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'),
});
scene.add(sprite);

Update the sprite.

sprite.fontFamily = 'Arial, Helvetica, sans-serif';
sprite.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');

members

constructor

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

Provide a custom loadFontFace function to support the older browsers.

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

properties

.text

.fontFamily

.fontSize

.fontWeight

.fontVariant

.fontStyle

.fillStyle

.strokeWidth

.strokeStyle

.align

.lineGap

.padding

.createCanvas

.loadFontFace

methods

.dispose()

Disposes the texture and the material.