Three.js 在三个js中检测立方体侧面的鼠标单击/悬停事件

我有一个使用三个js创建的立方体。（WebGL渲染器） 我已经在立方体的所有六个面上应用了纹理。

---

我想检测用户在立方体的哪一侧单击

外观相交[0]。面索引

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: 
      }

   }
}

---

外观与[0]相交。面索引

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: 
      }

   }
}