Inconsistent alpha channel in three.js

Question

I'm building an educational tool using planes, extruded splines, and cylinder geometries. Planes have a texture map and the rest are either basic or Lambert materials.

Texture map on planes in the only map and it does have an alpha channel.
Texture map has been tested as .GIF and .PNG
All objects have "transparent: true"
renderer = new THREE.WebGLRenderer( {antialias:true} );

NOTE: this is the exact same problem listed at the following link. It has not been solved and my Rep isn't high enough to comment.

in three.js, alpha channel works inconsistently

As mmaclaurin noted, it could be a change based in draw order and camera location. I am using THREE.TrackballControls and limiting camera movement to two axes.

Adding or removing the BasicMaterial for wireframe does not change the issue.

Thank you for your time reading this and any help you can offer!

Example of plane object:

var T4map = new THREE.ImageUtils.loadTexture( 'medium_T4.png' );
    var T4Material = new THREE.MeshBasicMaterial( { opacity: .96, transparent:true, map: T4map } );
    var T4Geometry = new THREE.PlaneGeometry(810, 699, 10, 10);
    var T4 = new THREE.Mesh(T4Geometry, T4Material);
    T4.position.y = -CNspacing;
    T4.doubleSided = true;
    scene.add(T4);

Example of extruded spline geometry where problem is most noticeable:

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
new THREE.MeshLambertMaterial( { color: 0xaaff00, opacity: 0.5, transparent: true } ),           
      mesh.position.set( x, y, z );
      mesh.scale.set( s, s, s );
      parent.add( mesh );

Moving all objects to y>0 didn't help. However, if I move the camera through all y positions to observe the lack of alpha, the effect eventually stops. Sounds like a drawing issue... — ChrisTalbot
Problem stops but transparency is lost and gone forever (until refresh) — ChrisTalbot

Alex Under Alex Under · Accepted Answer · 2012-12-10T02:28:10

Try to play around with depthTest. Usually this would help:

new THREE.MeshBasicMaterial( { side:THREE.BackSide,map:texture,transparency:true, opacity:0.9, depthWrite: false, depthTest: false });

There are many other questions related to your subject, for ex.: transparent bug

Inconsistent alpha channel in three.js

2 Answers