双面半透明纹理的问题

Question

我正在尝试使用three.js在画布上绘制类似笼子的对象，但是我可能做错了，因为笼子的短边行为不正确。我设法创建了jsFiddle here。前面和后面都很好（尽管如果从后面看笼子的话，尽管您仍然可以从各条之间看到笼子的底部，但是当您在轨道上旋转时，后面的纹理似乎可以“抹去”前面的笼子）仅当您绕着笼子旋转并在其前面放置相机时，才能看到侧面。笼子的所有侧面的代码都是相同的（除了地板为纯灰色，天花板为透明），它是：

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上sortObjects的文档

这里是fiddle。