2D Text Sprites

I’d like to render simple text strings that “always face the camera”. To save overhead, 2D text would be ideal. Unfortunately, I have not found any features in Three.js that support this. I don’t want to put the text into an image [sprite] because I need to update/change it dynamically.

Please prove my searches insufficient and point me to an example that illustrates this. It would greatly enhance our user experience!

Cheers,
Michael

Author: Fantashit

4 thoughts on “2D Text Sprites

  1. FYI, you can create a 2D text mesh using ShapeGeometry instead of TextGeometry.

    This reduces the number of faces generated because it doesn’t extrude.

    var shapes, geom, mat, mesh;
    
    shapes = THREE.FontUtils.generateShapes( "Hello world", {
      font: "helvetiker",
      weight: "bold",
      size: 10
    } );
    geom = new THREE.ShapeGeometry( shapes );
    mat = new THREE.MeshBasicMaterial();
    mesh = new THREE.Mesh( geom, mat );
    
  2. Canvas as texture is fast enough

    var canvas1 = document.createElement('canvas');
        var context1 = canvas1.getContext('2d');
        context1.font = "Bold 40px Arial";
        context1.fillStyle = "rgba(255,0,0,0.95)";
        context1.fillText(text, 0, 50);
    
        var texture1 = new THREE.Texture(canvas1);
        texture1.needsUpdate = true;
    
        var material1 = new THREE.MeshBasicMaterial( { map: texture1, side:THREE.DoubleSide } );
        material1.transparent = true;
    
        var mesh1 = new THREE.Mesh(
            new THREE.PlaneGeometry(canvas1.width, canvas1.height),
            material1
        );
    
        mesh1.position.set(position.x + 10,position.y,position.z);
    
        scene.add( mesh1 );

Comments are closed.