Three.js Transparenz/Disparation

Question

Ich bin neu zu Threejs und ich versuche, ein einfaches 3D-Modell zu machen. Nichtsdestotrotz habe ich ein Problem mit der Transparenz/Disparation, seit ich begonnen habe, mit Opazität zu spielen.

der wichtige Teil meines Code ist hier:

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

Wie Sie sehen können, ich versuche ein fourth.The Problem zu setzen 3 Zylinder in ist, dass einige dieser drei Zylinder verschwinden, wenn mein Objekt rotiert innerhalb eines bestimmten Bereichs.

Answer 1

Sie müssen transparent: true im Material für den größeren Zylinder einstellen.

Wenn Sie ein Anfänger sind, springen Sie in das tiefe Ende, indem Sie mit Transparenz experimentieren.

Transparenz kann mit WebGL schwierig sein. Wenn Sie diesen Weg weiterverfolgen möchten, Google wie verrückt und lernen Sie alles über die damit verbundenen Probleme und wie sie in Three.js behandelt werden.

three.js r.53