Three.js şeffaflık/dağılma

Question

Üç jenerasyon için yeniyim ve basit bir 3d model yapmaya çalışıyorum. Bununla birlikte, opaklıkla oynamaya başladığımdan beri bir miktar saydamlık/disparition sorunum var.

benim kod önemli bir parçası, burada: Gördüğünüz gibi

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

, ben bu 3 silindir bazıları benim nesne olduğunda kaybolur olmasıdır bir fourth.The problem haline 3 silindir koymak deneyin belirli bir aralıkta döndürülür.

Answer 1

Büyük silindir için malzemeye transparent: true'u ayarlamanız gerekir.

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

Eğer yeni başlayan biriyseniz, saydamlıkla deney yaparak derin sonlara atlıyorsunuz.

Şeffaflık WebGL ile zor olabilir. Bu yolda devam etmeyi planlıyorsanız, Google bu gibi çılgın gibi ve ilgili konular hakkında her şeyi öğrenebilir ve üç.js'de nasıl ele alınır.

three.js r.53