在three.js中,alpha通道工作不一致

时间:2012-06-01 20:58:16

标签: alpha three.js zbuffer

我正在以three.js建立一个“剪纸”世界。我的所有模型都是简单的“平面”,我使用带有alpha通道的PNG对它们进行纹理处理,以将平面修剪成更令人愉悦的形状。

奇怪的是:根据飞机的位置和相机的位置,透明度会出现不可预测的消失。

症状1:如果飞机部分位于地平面以下,则透明度有效,但如果我将其移到地平面上方,则透明区域将填充白色。

症状2:构建症状1:如果我现在移动相机以使外观矢量几乎与平面平行,则透明度将再次开始工作。

有什么想法?看起来有点像优化出错或可能出现z-write问题?是否写入z的纹理与alpha值无关?如果是这样的话,我认为它不会对位置或摄像机角度敏感。

1 个答案:

答案 0 :(得分:9)

您需要在素材中将transparent标记设置为true。

new THREE.MeshBasicMaterial( { map: transparent_map, transparent: true } );