alpha - 在 three.js 中，alpha channel 工作不一致

Question

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

奇怪的是:透明度会根据平面的位置和相机的位置而出人意料地出现和消失。

症状 1:如果平面部分位于地平面下方，则透明效果有效，但如果我将其移至地平面上方，透明区域将填充为白色。

症状 2:建立在症状 1 的基础上:如果我现在四处移动相机以使观察矢量几乎与平面平行，则透明度再次开始工作。

有什么想法吗？看起来有点像优化出错或可能是 z-write 问题？无论 alpha 值如何，纹理都会写入 z 吗？如果是这样的话，我认为它不会对位置或相机角度敏感。

Answer 1

您需要在 Material 中将 transparent 标志设置为 true。

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