Can I hide faces of a mesh in three.js?

Question

I want to make parts of a mesh invisible at runtime. Can I set these parts invisible/transparent, e.g. by changing attributes of single faces? The mesh itself uses only one material.

Exemplary illustration as the editor understands this question: Imagine a mesh (here with a geometry of 20 vertices) where each quad of four vertices builds up a Face4. Now, some parts of the mesh should be made invisible (here two faces are invisible).

example

Your question is not really clear. Are you trying to set faces' visibility as false (make them invisible)? — frank
I edited this question in a way I am understanding it. Especially, because I am having this question also and don't want to create a duplicate. — Matthias

WestLangley WestLangley · Accepted Answer · 2012-08-23T03:41:35

You can assign a different material to each face. Here is an example where the faces share a material, but some faces are transparent:

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

Updated Fiddle showing one way to change a material at runtime: http://jsfiddle.net/e0x88z7w/

EDIT: MeshFaceMaterial has been deprecated. Post and fiddle updated.

three.js r.87

Can I hide faces of a mesh in three.js?

1 Answers