zbuffer problems using 2D planes in THREE.JS

Question

I am composing 2D planes with textures. I have 3 levels.

A background plane at z=0, 
black shapes for conections at z=0.1 and 
small planes with textures at z=0.2

the problem is that when I move the camera planes seems to change z position.

Planes are drawn in incorrect Z, it depend on the position of the camera. Moving the camera it changes again and looks very ugly.

Maybe I need to activate some ZBuffer property for correct drawing

WebGL init is like this and planes are exactly the same (only Z coord change)

renderer = new THREE.WebGLRenderer();    
renderer.setSize(window.innerWidth, window.innerHeight);
renderer._microCache = new MicroCache(); //cache de imagenes
renderer.setClearColor(0xeeeeee, 1);
document.body.appendChild(renderer.domElement);

// add directional light source
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1300).normalize();
scene.add(directionalLight);

//background plane
plane = new THREE.Mesh(new THREE.PlaneGeometry(200000, 200000, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffffff, opacity: planeOpacity, transparent: true }););          
plane.position.z = 0;
scene.add(plane);

Other planes are exactly the same but greater Z position

Help please! Thanks! Palomo

Answer 1

The thing you're seing is probably z-fighting. Internally, depth is represented by integer in GPU so there is only fixed number of distinct z-s between camera's near and far planes. The solution is to either move your planes apart or narrow camera's near-far range down.