使用正交相机将鼠标点击转换为 3d space

Question

Three.js：版本 73

我正在使用以下构造来查找鼠标单击与 3d 世界中对象的交集（正交设置）：

function onDocumentMouseDown(event) {
  event.preventDefault();
  console.log("Click");

  var mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  var raycaster = new THREE.Raycaster();
  // update the picking ray with the camera and mouse position 
  raycaster.setFromCamera(mouse, camera);

  // calculate objects intersecting the picking ray
  var intersects = raycaster.intersectObjects(scene.children);

  console.log("intersects: " + intersects.length);

  for (var i = 0; i < intersects.length; i++) {
    console.log(intersects[i].point);
  }

}

但是，交集很不准确。当我仅在框的左上角附近单击时，会捕获交叉点。

jsFiddle：谁能帮我理解为什么会这样？

此外，如果未选择任何对象，我想找出 3d 世界中相对于框的点击位置 - 左侧、右侧、框下方？我可以使用射线本身来计算吗？

Answer 1

您必须为 ray-casting 获得准确的鼠标位置：-

  mouse.x = ( (event.clientX -renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1;
   mouse.y = -( (event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height ) * 2 + 1;

你必须在 window 调整大小时触发事件侦听器我再次更新 fiddle 现在检查它。添加 window 调整大小的新功能... 代码是自我解释的...希望你明白了。

现在检查更新 Fiddle

已更新fiddle：- http://jsfiddle.net/gc1v0rza/5/

使用正交相机将鼠标点击转换为 3d space

convert mouse click to 3d space with orthographic camera

javascript

3d

mouseevent

three.js