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，经过Google搜索后，我找到了this page并应用了这种方法。它正常工作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;
  ...
}

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

1 个答案:

更新