Three.js transparency/disparition

Question

Jestem nowy w troje i próbuję stworzyć prosty model 3D. Mimo to, mam problem z przezroczystością/rozbieżnością, odkąd zacząłem grać z nieprzezroczystością.

ważną częścią mojego kodu, jest tutaj:

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); 

Jak widać, staram się umieścić 3 cylindry na problem fourth.The jest to, że niektóre z tych 3 cylindrach znikają, gdy mój obiekt jest obrócone w określonym zakresie.

Answer 1

Musisz ustawić transparent: true w materiale dla większego cylindra.

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

Jeśli jesteś początkujący, skacz w głębokim końcu eksperymentując z przezroczystością.

Przezroczystość może być trudna w przypadku WebGL. Jeśli planujesz kontynuować tę ścieżkę, Google to jak szalony i naucz się wszystkiego na temat związanych z tym problemów i sposobu, w jaki są one obsługiwane w three.js.

three.js r.53