ThreeJS -投影/光线投射鼠标单击到XZ平面

Question

我正在尝试在ThreeJS scene的3D地图中实现离线路由。我希望用户点击一个点，然后导航一个立方体到这一点。导航工作正常，但单击点不准确。平面贴图是在XZ坐标中Y轴向上的平面。在场景中，我有轨道控制，当轨道改变相机的位置参数时，光线投射与我正在做的方式是不准确的。我需要在任何轨道状态下得到正确的XZ坐标。我得到了3D中传统光线投射的正确坐标，但正如我所说的，这不是我需要的。我尝试了ThreeJS文档中的基本方法，用this question回答，用Vector3.unproject()取消鼠标点击，但都没有成功。

Here是jsfiddle来说明我的意思。这里有一些重要的解释注释。

Answer 1

我的代码中可能有一些bug。经过重写和一些试验，从相交平面得到坐标的方法效果很好。当然，使用已实现的轨道控制。下面是我的'onMouseClick‘函数现在的样子：

var mouse = new THREE.Vector2();
   var rect = scope.renderer.domElement.getBoundingClientRect();
    mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
    mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  var intersection = raycaster.intersectObject(plane);
  //example box for position visualisation
  box.position.copy(intersection[0].point);
  box.position.y = 0;

Three.js r.87