javascript - Issue with double-sided semi-transparent textures -

javascript - Issue with double-sided semi-transparent textures -

i'm trying draw cage-like object onto canvas using three.js, i'm doing wrong because short sides of cage behave wrong. managed create jsfiddle here. front end , alright (although if @ cage behind, texture seems "erase" front end 1 orbit, though floor of cage still visible between bars) short sides visible if orbit around cage , position photographic camera in front end of them. code same sides of cage (except floor solid grayness , ceiling transparent), , it's:

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

what doing wrong? click , drag orbit around scene thought of issue facing. sense free edit fiddle. in advance.

one way accomplish want disable depthtest transparent objects sorted. sorting used effort render objects have grade of transparency. (from documentation of webglrenderer on sortobjects

here fiddle.

javascript three.js