Transparent Object hides other transparent Objects

Question

I currently have a problem with transparency. As you can see in the pictures, the non transparent objects behind the transparent object are shown. But the backsideof the other transparent object is not shown, I set material.side = THREE.DoubleSide.

It is visible, when I set material.depthWrite = false, but then the visible glitch happens, you can see in the second picture.

I use THREE.MeshPhongMaterial and the newest Version of Three.js. Here are the values for the material you can see in the picture

material.color.setHex(0x9ed7f5);
material.emissive.setHex(0x062f61);
material.transparent = true;
material.opacity = 0.5;
material.needsUpdate = true;
material.reflectivity = 0.8;
material.envMap = textureCube;
material.side = THREE.DoubleSide;
material.roughness = 0.2;
material.metalness = 1;
depthWrite = true;

depthwrite = false;

Here how it should look, only works if object behind is NOT transparent

It seems like from the other side I can see the transparent object behind.

Just to complete my confusion about this problem I have to post another picture. Here you can see picture (1) just from the other side (scene rotated by 180°) as you can see those view is different as there is an object missing in the back (also a transparent one) which is shown in the other view. All of these objects have the exact same material!

The envMap textureCube is created as follows

textureCube = new THREE.CubeTextureLoader().load(urls);
textureCube.format = THREE.RGBFormat;
var shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
var shaderMaterial = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader
    , vertexShader: shader.vertexShader
    , uniforms: shader.uniforms
    , depthWrite: false
    , side: THREE.BackSide
});
var skyBox = new THREE.Mesh(new THREE.BoxGeometry(1500, 1500, 1500), shaderMaterial);
scene.add(skyBox);

Answer 1

In 2019 this is still a top search result for this problem. I found a solution that worked for me (not sure why since this apparently is a weird WebGL problem according to some sources).

After the scene is set up with all transparent objects in it, set the hidden object's material's transparent property to false. Can't say this will work for everyone, but it worked for me. Here's proof:

The transparent green box is showing up behind the transparent white shapes. It's even possible to change the green box's opacity despite the transparent property being set to false.

Answer 2

When creating a transparent object, try setting premultipliedAlpha to true, and that could fix the problem:

var material = new THREE.MeshPhongMaterial( {color: 'color', transparent: true,opacity:0.5,premultipliedAlpha: true} );

Answer 3

I can't quite make out your issue from your pictures but can you tell me if this is the same thing?

Go to threejs.org/docs/#Reference/Materials/MeshStandardMaterial, in the live example set ambient to white, turn on transparent in the material and set opacity to about 0.7.

Can you see the way that the transparent part of the torus in the foreground occludes other parts when they go behind it? It might take a while but if you watch it as it rotates you should see what I mean.

Unfortunately this is a WebGL limitation, not anything that can be fixed by three.js for the time being.