在三个 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: 
      }

   }
}

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

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

three.js