javascript 三.js 透明度/差异
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13888561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js transparency / disparition
提问by Remy Grandin
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.
我是 Threejs 的新手，我正在尝试制作一个简单的 3d 模型。尽管如此，自从我开始使用不透明度以来，我遇到了一些透明度/差异问题。
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.
如您所见，我尝试将 3 个圆柱体放入第四个圆柱体中。问题是当我的对象在特定范围内旋转时，这 3 个圆柱体中的一些会消失。
回答by WestLangley
You need to set transparent: truein the material for the larger cylinder.
您需要transparent: true为较大的圆柱体设置材料。
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.
WebGL 的透明度可能很棘手。如果你打算继续沿着这条路走下去，那就疯狂地谷歌一下，尽可能地了解所涉及的问题，以及它们是如何在three.js 中处理的。
three.js r.53
三.js r.53
