三.js：点击2*2*2几何立方体时检测faceIndex不准确

Question

我通过 Three.js 创建了一个 2*2*2 几何立方体。现在我想检测点击面孔（总共24张面孔）时的点击事件。

请在https://jsfiddle.net/agongdai/pdwg3myr/17/检查我当前的实现。单击脸部时，我想要console.log当前的脸部索引。但该指数并不总是准确的。例如，单击左上角的灰色单元格应显示 0，但实际上单击其底部部分显示 2。

请帮我检查一下鼠标单击事件处理程序：

var raycaster = new THREE.Raycaster();
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.setFromCamera( vector, 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 );
      console.log(index);
   }
}

有人可以帮忙吗？

Answer 1

Em，经过大量谷歌搜索后，我找到了这个页面并应用了该方法。它工作正常https://jsfiddle.net/agongdai/pdwg3myr/19/：

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
function onDocumentMouseDown(event) {
  mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
  mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObject(cube);
  if (intersects.length > 0) {
    var index = Math.floor(intersects[0].faceIndex / 2);
    console.log(index);
  }
}

更新

要调整到左/上移动和滚动，请将其更新为https://jsfiddle.net/agongdai/pdwg3myr/24/：

function onDocumentMouseDown(event) {
  const holder = renderer.domElement;
  const rect = holder.getBoundingClientRect();
  mouse.x = ((event.pageX - rect.left - window.scrollX) / holder.clientWidth) * 2 - 1;
  mouse.y = -((event.pageY - rect.top - window.scrollY) / holder.clientHeight) * 2 + 1;
  ...
}