Three.js 透明度/差异答案

【问题标题】：Three.js transparency / disparitionThree.js 透明度/差异
【发布时间】：2012-12-03 00:54:29
【问题描述】：

我是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 个圆柱体中的一些会消失。

【问题讨论】：

标签： javascript 3d transparency three.js

【解决方案1】：

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

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

如果您是初学者，那么您就是在尝试透明度。

WebGL 的透明度可能很棘手。如果您打算继续沿着这条路走下去，那么疯狂地谷歌一下，尽可能地了解所涉及的问题，以及它们在 three.js 中是如何处理的。

three.js r.53

【讨论】：