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