Three.js transparency / disparition

Question

I'm new to threejs and I'm trying to make a simple 3d model. Nevertheless, I've got some transparency / disparition issue since I've started to play with opacity.

the important part of my code, is here:

    var cylJaun = new THREE.MeshNormalMaterial({color: 0xFFFF00, opacity: 1});
    var cylBleu = new THREE.MeshNormalMaterial({color: 0x0000FF, opacity: 0.5 });

    var cylJaun1 = new THREE.Mesh(new THREE.CylinderGeometry(50,50,50,100,1,false),cylJaun);
    var cylJaun2 = new THREE.Mesh(new THREE.CylinderGeometry(50,50,50,100,1,false),cylJaun);
    var cylJaun3 = new THREE.Mesh(new THREE.CylinderGeometry(50,50,50,100,1,false),cylJaun);

    var cylBleu1 = new THREE.Mesh(new THREE.CylinderGeometry(70,70,200,100,1,false),cylBleu);

    cylJaun1.position.y -= 60; 
    cylJaun3.position.y += 60; 

    group.add(cylBleu1);

    group.add(cylJaun1);
    group.add(cylJaun2);
    group.add(cylJaun3);

    scene.add(group);

As you can see, I try to put 3 cylinders into a fourth.The problem is that some of those 3 cylinders disappear when my object is rotated within a specific range.

Answer 1

You need to set transparent: true in the material for the larger cylinder.

var cylBleu = new THREE.MeshNormalMaterial( { transparent: true, opacity: 0.5 } );

If you are a beginner, you are jumping in the deep end by experimenting with transparency.

Transparency can be tricky with WebGL. If you are planning on continuing down this path, Google it like crazy and learn all you can about the issues involved, and how they are handled in three.js.

three.js r.53