Overlapping meshes with transparency

Question

I'm not sure if I'm wording this right but the situation is as such. I'm rendering a couple of meshes with a solid colour and transparency in Three.JS. They are overlapping somewhat. Where the meshes overlap, the colours do too. As you can see by the dark blue areas.

http://jsfiddle.net/H6RBk/

What I would like is for the meshes to be a solid, transparent whole. If it helps, the meshes are the only thing that are being rendered to that specific scene, so if there's some way to make the whole scene transparent that's fine too.

Answer 1

Edit the blending property of your material. By default it is THREE.NormalBlending.

I changed it to THREE.NoBlending and it looks like what you wanted.

var material = new THREE.MeshBasicMaterial({
    color: 0x0000ff,
    transparent: true,
    opacity: .5,
    blending: THREE.NoBlending 
});