Mesh materials are not visible through a transparent background of the sprite

Question

I have a scene with a mesh (MeshPhongMaterial), box helper around this mesh, green spherical point markers (MeshLambertMaterial) and sprites (png images of "pins" with transparent backgrounds). And I am running into this issue:
http://imgur.com/nDQ3VRk
http://imgur.com/53NJhpK
Both my green markers and box helper lines are visible through the transparent background of my "pin" sprite, but my main mesh material isn't. In fact in the second image above the green marker that is visible through the png background is inside of the bronze mesh object and would not be visible otherwise.

Here are my materials:
1) Main mesh material JSON:

'Bronze': {
        emissive: '#000000',
        color: "#cd7f32",
        specular: 0x83776B,
        shininess: 100,
        reflectivity: 1,
        shading: THREE.SmoothShading,
        metal: true,
        envMap: textureEquirec,  // our own hdri reflection image
        transparent:true,
        depthTest: true
}

2) Material for the green marker:

THREE.MeshLambertMaterial({ color: 0x00ff00 })

3) Material for the box helper:

THREE.LineBasicMaterial({ color: 0xdddddd })

4) Material/texture for the Sprite:

var textures = {
      ...
      selectedPin: 'images/sprites/selected.png'
};
this.selectedPinTexture = THREE.ImageUtils.loadTexture( textures.selectedPin);
this.selectedPinMaterial = new THREE.SpriteMaterial( { map: this.selectedPinTexture } );

Please advise,
Thank you,
Anton.

bjorke bjorke · Accepted Answer · 2015-10-28T21:58:55

If your pin sprite is drawing before the mesh, and writing depth (depthWrite:true) then the mesh will not appear.

Set .renderOrder of the sprite to always draw after the mesh if you want it to be transparent the mesh to be visible through it.

Mesh materials are not visible through a transparent background of the sprite

2 Answers