A HTML5 szabvány lehetőséget biztosít vektorgrafikus rajzolásra egy téglalap alakú területre. Ez a téglalap egy vászon (canvas) objektum. A vászonból pedig Three.js textúrát készíthetünk. Erre példát a 08_04_ThreeJsCanvasTextTexture példaprogramban találunk, a részletek tárgyalásától eltekintünk.

// Vászon létrehozása
let textCanvas = document.createElement( 'canvas' );
textCanvas.width = 256;
textCanvas.height = 64;
let textContext = textCanvas.getContext( '2d' );

 // Körvonal a vászon terület köré
 textContext.lineWidth = 3;
 textContext.strokeStyle = "blue";
 textContext.rect( 1, 1, textCanvas.width - 2, textCanvas.height - 2 );
 // Kitöltés, ha nem akarunk teljesen átlátszó hátteret
 textContext.fillStyle = "orange";
 textContext.fill();
 // Téglalap rajzolása
 textContext.stroke();

// Szöveg kiírása
textContext.font = "Bold 32px Arial";
textContext.fillStyle = "rgba(255, 0, 0, 0.95)";
textContext.fillText( 'Vászon szöveg', 10, 40 );

// A vászon az oldal DOM-hoz adható tesztelésként
document.body.appendChild(textCanvas);

// Vászon grafikából Three.js textúra
var textTexture = new THREE.Texture( textCanvas );
textTexture.needsUpdate = true;

let planeGeometry = new THREE.PlaneGeometry( textCanvas.width, textCanvas.height );
let planeMaterial = new THREE.MeshBasicMaterial( { side:THREE.DoubleSide } );
planeMaterial.map = textTexture;
// A textúra átlátszóvá tehető
planeMaterial.transparent = true;
planeMaterial.opacity = 0.6;

let textMesh = new THREE.Mesh(
        planeGeometry,
        planeMaterial
);

meshText.position.set( 0, 0, 80 );
scene.add( meshText );