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

Question

我有一个使用三个js创建的立方体。(WebGL渲染器)我已经在立方体的所有六个面上应用了纹理。我想检测用户点击了立方体的哪一侧？

Answer 1

外观相交[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: 
      }

   }
}