Hide Mesh Faces at RunTime in Three.js

Question

I am using the version THREE.js57. I want to hide selected face at run time. Is this possible in three.js

Thanks & Regards

Answer 1

Indeed this is possible, you'll want to look into the Raycaster library, here's the high level steps

• unproject your mouse click coordinates into the 3D scene.
• cast rays into your scene and return an intersected array of collided objects
• this intersected object will have the affected face and faceIndex as parameters
• on collision turn the face @ faceIndex transparency to 0

Have a look at these doc pages: http://threejs.org/docs/#Reference/Core/Projector http://threejs.org/docs/#Reference/Core/Raycaster

And this example for a start: https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes.html

Edit: Alright, well to then hide the face you can have a peak at this other SO post:

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

The gist is you have a multimaterial object, the first material is your default, and a second material that's fully opaque. Then when you intersect you set the face to use the second materialIndex. Anyway, the above link should do the job. Off to up vote that response. :)