THREE.js transparent plane cutting adjacent object texture

Question

transcut http://glasier.hk/image/transcut.png

Each face is made with this:

geometry = new THREE.PlaneGeometry(w,h,1,1,1);
base = new THREE.MeshBasicMaterial( { color: pass.color, transparent: true, side: THREE.DoubleSide} )
material = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture(pass.img), transparent: true, opacity:1, side: THREE.DoubleSide });
shape = new THREE.Mesh(geometry, material);

What have I done wrongly?

Answer 1

It looks like a depth buffer issue. See this and that.

You can try playing with the depthTest and depthWrite parameters of your material or draw the objects in a custom order. You can do this by setting renderer.sortObjects = false and adding to the scene the transparent textures last.