Three.js 不准确的 Raycaster

Question

我试图检测我的平面网格上的点击。我使用示例作为指导设置了一个 raycaster。

这是代码：http : //jsfiddle.net/BAR24/o24eexo4/2/

当您在标记线下方单击时，即使单击位于平面内，也不会检测到单击（标记线无效）。

也可以尝试调整屏幕大小。然后，即使在标记线上方单击也可能不起作用。

也许这与使用正交相机有关？或者不更新一些必需的矩阵？

function onMouseDown(event) {
  event.preventDefault();

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  //console.log("x: " + mouse.x + ", y: " + mouse.y);

  raycaster.setFromCamera(mouse, camera)

  var intersects = raycaster.intersectObjects(objects);

  if (intersects.length > 0) {
    console.log("touched:" + intersects[0]);
  } else {
    console.log("not touched");
  }
}

Answer 1

你的 CSS 会影响你的光线投射计算。你可以做的一件事是设置

body {
    margin: 0px;
}

有关更多信息，请参阅THREE.js Ray Intersect 通过添加 div 失败。

您还必须正确处理窗口大小调整。典型的模式如下所示：

function onWindowResize() {

    var aspect = window.innerWidth / window.innerHeight;

    camera.left   = - frustumSize * aspect / 2;
    camera.right  =   frustumSize * aspect / 2;
    camera.top    =   frustumSize / 2;
    camera.bottom = - frustumSize / 2;

    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

研究三个.js 示例。特别是，请参阅http://threejs.org/examples/webgl_interactive_cubes_ortho.html。

另外，请阅读此答案，其中描述了如何正确实例化正交相机。

三.js r.80