THREE.js 透明平面切割相邻物体纹理

【问题标题】：THREE.js transparent plane cutting adjacent object textureTHREE.js 透明平面切割相邻物体纹理
【发布时间】：2014-02-11 20:35:19
【问题描述】：

transcut http://glasier.hk/image/transcut.png

每张脸都是这样制作的：

geometry = new THREE.PlaneGeometry(w,h,1,1,1);
base = new THREE.MeshBasicMaterial( { color: pass.color, transparent: true, side: THREE.DoubleSide} )
material = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture(pass.img), transparent: true, opacity:1, side: THREE.DoubleSide });
shape = new THREE.Mesh(geometry, material);

我做错了什么？

【问题讨论】：

标签： three.js alpha-transparency

【解决方案1】：

看起来像是深度缓冲区问题。请参阅this 和that。

您可以尝试使用材质的 depthTest 和 depthWrite 参数，或按自定义顺序绘制对象。您可以通过设置 renderer.sortObjects = false 并将透明纹理最后添加到场景中来做到这一点。

【讨论】：

太好了，谢谢。正如 Doob 先生在“this”中建议的那样，我使用了 alphaTest: 0.5。上帝保佑他的棉袜。