Can I Hide Faces Of A Mesh In Three.js?

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 materia

Solution 1:

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

// geometryvar 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 facefor( 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