Have ideas to improve npm?Join in the discussion! »

    This package has been deprecated

    Author message:

    WARNING: This project has been renamed to @seregpie/three.text-texture.

    three.texttexture

    22.0.0 • Public • Published

    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

    Install

    npm i three.texttexture

    DownloadsWeekly Downloads

    511

    Version

    22.0.0

    License

    MIT

    Unpacked Size

    8.5 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar