Question

我正在尝试在ThreeJS场景中的3D地图中实现离线路由。我希望用户单击一个点，然后将多维数据集导航到此点。导航工作正常但点击的点不准确。平面地图是XZ坐标中的平面，Y轴向上。在场景中，我有轨道控制，当轨道运行改变摄像机的位置参数时，因此光线投射不像我正在做的那样准确。我需要在任何轨道状态下获得正确的XZ坐标。我正在为3D中的传统光线投射获得正确的坐标，但正如我所说，这不是我需要的。我尝试了来自ThreeJS docs for raycaster的基本方法，从this question回答并用Vector3.unproject()取消鼠标点击鼠标，但没有成功。

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

Answer 1

我的代码中可能有一些错误。在重写和一些试验之后，从交叉平面获得坐标的方法运作良好。当然有实施的轨道控制。这就是我的onMouseClick＆＃39;功能现在看起来：

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

ThreeJS - 项目/光线投射鼠标点击XZ平面

1 个答案: