I'm having trouble creating a cage-like object on a canvas using three.js. It seems like there's a problem with the short sides of the cage. Despite my efforts, I can't seem to get them to behave correctly. You can view the jsFiddle I created here.
The front and back of the cage look fine (although when viewing from behind, it appears that the back texture is erasing the front one as you orbit around). Interestingly, the floor of the cage is still visible between the bars. However, the short sides are only visible if you position the camera in front of them while orbiting. The code for all sides of the cage is the same (except for the solid gray floor and transparent ceiling), which is shown below:
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)
);
I need help figuring out what I'm doing wrong. Orbit around the scene by clicking and dragging to experience the issue firsthand. Please feel free to make edits to the fiddle. Thank you in advance.