Javascript 双面半透明纹理的问题

我试图使用three.js在画布上绘制一个类似笼子的对象，但我可能做错了什么，因为笼子的短边行为不正确。我成功地创建了一个JSFIDLE。
前面和后面都很好（虽然如果你从后面看笼子，当你旋转时，后面的纹理似乎会“擦除”前面的纹理，即使从栏杆之间仍然可以看到笼子的地板），但是只有当你围绕笼子旋转并将相机放在它们前面时，短边才可见。该代码适用于笼子的所有侧面（除了纯灰地板和透明天花板），其为：

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)
);

---

我做错了什么？单击并拖动以环绕场景，了解我面临的问题。请随意编辑小提琴。提前感谢。

实现所需功能的一种方法是在对透明对象进行排序时禁用depthTest。 排序用于尝试正确渲染具有一定透明度的对象。（来自于

SortObject

---

这是一个很好的例子。

但仍然有一个小问题：为了说明这一点，我将笼子的地板颜色设置为红色，并增加了它的y坐标，这样你就可以在它下面进行轨道运动：看起来通过地板可以看到这些条带！当然可以。这是因为我们禁用了深度测试。请看下面的评论