three.js中的文字：旋转时透明度丢失

Question

我正在尝试第二种方法use Text in three.js，在画布上绘图并将结果用作纹理。它基本上有效，除了以下问题 - 不知道它是不是一个bug：

我创建两个文本，透明背景，然后重叠。它们显示正常，但是当我旋转其中一个时，透明度就搞砸了。

我使用以下（摘录）功能

创建文本对象

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;
}

并将它们添加到场景中。 请参阅jsfiddle

中的完整代码演示

Answer 1

webGL中的透明度很棘手。

在您的情况下，最佳解决方案是对透明文本材料执行以下操作：

mat.depthTest = false;

更新小提琴：http://jsfiddle.net/SXA8n/4/

three.js r.55