javascript - 使用正交相机将鼠标点击转换为 3d 空间

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

您必须获得准确的鼠标位置才能进行光线转换:-

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

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

现在检查 Update Fiddle

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