Three.js透明度/消失

Question

我刚接触threejs并尝试制作一个简单的3D模型。但是，自从我开始调整透明度以来，遇到了一些透明度/消失问题。

代码中关键部分如下：

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

如您所见，我试图将3个圆柱体放入第四个。问题是当我的物体在特定范围内旋转时，其中一些3个圆柱体会消失。

- Remy Grandin

Answer 1

你需要在较大的圆柱体材质中设置 transparent: true。

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

如果您是初学者，那么通过尝试透明度来进行实验相当冒险。

WebGL中的透明度可能很棘手。如果您打算继续沿着这条路走，请疯狂地搜索并了解有关所涉及问题以及它们在three.js中如何处理的所有信息。

three.js r.53

- WestLangley