in three.js, alpha channel works inconsistently

Question

I'm building a "paper cutout" world in three.js. All my models are simple "planes," and I texture them with PNGs that have alpha channels to trim the plane to a more pleasing shape.

The strange thing: the transparency appears and disappears unpredictably, based on the position of the plane and the position of the camera.

Symptom 1: if the plane is partially below the ground plane, transparency works, but if I move it above the ground plane the transparent area fills with white.

Symptom 2: building on symptom 1: if I now move the camera around so that the look vector is almost parallel to the plane, the transparency starts working again.

Any thoughts? Looks a bit like an optimization gone wrong or possible a z-write problem? is the texture writing to z regardless of alpha value? Were that the case, I wouldn't think it would be sensitive to position or camera angle.

Answer 1

You need to set the transparent flag to true in the material.

new THREE.MeshBasicMaterial( { map: transparent_map, transparent: true } );