我可以在three.js中隐藏网格的面吗?

时间:2012-06-14 00:38:06

标签: javascript three.js mesh

我想在运行时使网格的一部分不可见。我可以将这些部件设置为不可见/透明,例如通过改变单面的属性?网格本身只使用一种材料。


示例性插图,因为编辑器理解这个问题:想象一个网格(这里有20个顶点的几何),其中四个顶点的每个四边形构建一个{{1 }}。现在,网格的某些部分应该是不可见的(这里两个面是不可见的)。

example

1 个答案:

答案 0 :(得分:23)

您可以为每张脸指定不同的素材。以下是面共享材质的示例,但有些面是透明的:

// geometry
var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );

// materials
materials = [
    new THREE.MeshLambertMaterial( { color: 0xffff00, side: THREE.DoubleSide } ),
    new THREE.MeshBasicMaterial( { transparent: true, opacity: 0 } )
];

// assign material to each face
for( var i = 0; i < geometry.faces.length; i++ ) {
    geometry.faces[ i ].materialIndex = THREE.Math.randInt( 0, 1 );
}
geometry.sortFacesByMaterialIndex(); // optional, to reduce draw calls

// mesh
mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );

更新了小提琴,显示了一种在运行时更改材料的方法:http://jsfiddle.net/e0x88z7w/

编辑:MeshFaceMaterial已被弃用。帖子和小提琴更新。

three.js r.87