15

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

gman
  • 100,619
  • 31
  • 269
  • 393
user1455053
  • 151
  • 1
  • 3
  • Your question is not really clear. Are you trying to set faces' visibility as false (make them invisible)? – frank Jun 14 '12 at 11:30
  • 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 Aug 23 '12 at 01:56

1 Answers1

24

Note: This answer applies to legacy versions of three.js

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

three.js r.87

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • But how do I change these face materials at *runtime*? I added a click listener to the [Fiddle](http://jsfiddle.net/2FZU7/2/) which should make all faces yellow again but it *does not work*. I found a [related discussion](https://github.com/mrdoob/three.js/issues/1303) on that. – Matthias Aug 24 '12 at 10:09
  • **Remark:** Making all faces yellow again is against the use case of the question. I [changed the code](http://jsfiddle.net/2FZU7/3/) to apply the transparent material to every face on click which doesn't work either, of course. – Matthias Aug 24 '12 at 10:29
  • 1
    This fiddle allows _runtime_ changes. http://jsfiddle.net/2FZU7/4/. It is based on the "related discussion" you referenced. Also because buffers need to be pre-allocated, you can't change to a more complicated material, so in the new fiddle, both materials are `Lambert`. – WestLangley Aug 24 '12 at 13:16