Question

I’m trying the second approach to use Text in three.js, drawing on a canvas and using the result as a texture. It basically works, except for the following problem -don’t know if it’s a bug:

I create two texts, with transparent background, and overlap then. They show ok, but when I rotate one of them, the transparency is messed up.

I create the text objects with following (excerpt) function

function createText(text, ...){
    var textHolder = document.createElement( 'canvas' );
    var ctext = textHolder.getContext('2d');
    ...
    var tex = new THREE.Texture(textHolder);
    var mat = new THREE.MeshBasicMaterial( { map: tex, overdraw: true});
    mat.transparent = true;
    mat.map.needsUpdate = true;
    var textBoard = new THREE.Mesh(new THREE.PlaneGeometry(textHolder.width, textHolder.height),mat);
    textBoard.dynamic = true;
    textBoard.doubleSided = true;
    return textBoard;
}

and add them to the scene.
See demonstration with full code in jsfiddle

Answer 1

Transparency is tricky in webGL.

The best solution in your case is to do the following for your transparent text material:

mat.depthTest = false;

updated fiddle: http://jsfiddle.net/SXA8n/4/

three.js r.55