1

我正在尝试使用 text in three.js的第二种方法，在画布上绘图并将结果用作纹理。它基本上可以工作，除了以下问题 - 不知道它是否是一个错误：

我创建了两个具有透明背景的文本，然后重叠。它们显示正常，但是当我旋转其中一个时，透明度被弄乱了。

我使用以下（摘录）功能创建文本对象

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中查看完整代码的演示

在此处输入图像描述

4

1 回答 1

3

webGL 中的透明度很棘手。

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

mat.depthTest = false;

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

三.js r.55

于 2013-02-17T18:55:16.507 回答