detect mouse click / hover event on sides of cube in three js

Question

I have a cube created using three js.(WebGL renderer) I have applied texture on all six sides of cube. I want to detect on which side the user has clicked on cube ?

Answer 1

look intersects[0].faceIndex

var geometry = new THREE.BoxGeometry( 200, 200, 200 );
var raycaster = new THREE.Raycaster();

Cube = new THREE.Mesh( geometry, 
new THREE.MeshFaceMaterial( materials ) );
scene.add( Cube );

function onDocumentMouseDown( event ) {

   var vector = new THREE.Vector3( 
      ( event.clientX / window.innerWidth ) * 2 - 1, 
      - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
   vector.unproject( camera );
   raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

   var intersects = raycaster.intersectObject( Cube );
   if ( intersects.length > 0 ) {
      var index = Math.floor( intersects[0].faceIndex / 2 );
      switch (index) {
         case 0: 
         case 1: 
         case 2: 
         case 3: 
         case 4: 
         case 5: 
      }

   }
}