双面半透明纹理问题

Question

我试图用three.js在画布上画一个类似笼子的物体，但我可能做错了什么，因为笼子的短边表现得不对。我设法创建了一个jsFiddle 这里。

前面和后面都没问题(虽然你从后面看笼子，当你在轨道上运行时，背面的纹理似乎会“擦除”前面的一个，即使笼子的地板从栏杆之间仍然可以看到)，但只有当你绕着笼子旋转并将相机放在它们前面时，短边才能被看到。笼子的所有侧面的代码是相同的(除了地板是坚实的灰色和天花板是透明的)，它是：

var cageTexture = THREE.ImageUtils.loadTexture(/*omitted, see fiddle*/);
cageTexture.wrapS = THREE.RepeatWrapping;
cageTexture.wrapT = THREE.RepeatWrapping;
cageTexture.repeat.set(10, 1);
var cageFaces = [
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, opacity: 0, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color: "gray", side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide})
];
var cage = new THREE.Mesh(
    new THREE.BoxGeometry(2, 1.5, 1),
    new THREE.MeshFaceMaterial(cageFaces)
);

我做错了什么？点击和拖到轨道周围的场景，以获得一个想法，我面临的问题。请随意编辑小提琴。提前谢谢。

Answer 1

实现目标的一种方法是在对透明对象进行排序时禁用depthTest。排序用于尝试正确呈现具有一定透明度的对象。(取自WebGLRenderer on sortObjects的文档)

这是小提琴。