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

我正在尝试第二种方法到use Text in three.js，在画布上绘制并将结果用作纹理。它基本上工作，除了下面的问题 - 不知道它是否是一个bug：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

enter image description here

来源

2013-02-17 leonbloy

透明度WebGL是棘手。

你的情况最好的解决办法是做以下为你透明文本材料：

mat.depthTest = false;

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

three.js所r.55

来源

2013-02-17 18:55:16 WestLangley

可悲的是，这种修复透明度问题在两个文本的交互中，但另一方面它打破了与其他对象的交互。看到我的小提琴在这里：http://jsfiddle.net/leonbloy/2XTnr/（与你唯一的区别是球体放置在靠近，所以它应该阻止文本）看到效果，当一个注销线'垫.depthTest = false;'有什么想法？ – leonbloy 2013-02-24 23:07:17

对不起，这里是小提琴：http://jsfiddle.net/leonbloy/dfcJe/1/ 也许我会切换到CanvasRenderer？ – leonbloy 2013-02-24 23:27:47

是的，有权衡。这只是需要透明度的副作用。 – WestLangley 2013-02-25 00:29:51

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

回答

相关问题