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

mma*_*rin 3 alpha zbuffer three.js

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

奇怪的是:根据飞机的位置和摄像机的位置,透明度出现并且不可预测地消失.

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

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

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

mrd*_*oob 9

您需要transparent在材质中将标志设置为true.

new THREE.MeshBasicMaterial( { map: transparent_map, transparent: true } );
Run Code Online (Sandbox Code Playgroud)