ThreeJS - 项目/ raycast鼠标点击XZ飞机

我试图在ThreeJS场景内的3D地图中实现离线路由。我希望用户单击一个点，然后导航到此点的多维数据集。导航工作正常，但点击点不准确。平面地图是Y轴向上的XZ坐标平面。在这个场景中，我得到了Orbit Controls，它在轨道运行时改变了摄像机的位置参数，因此光线投射并不准确。我需要在任何轨道状态下获得正确的XZ坐标。我在3D中获得了传统射线投影的正确坐标，但正如我所说，这不是我所需要的。我尝试使用ThreeJS文档中的raycaster的基本方法，从this question得到答案，并且在没有任何成功的情况下取消投射鼠标点击Vector3.unproject()。ThreeJS - 项目/ raycast鼠标点击XZ飞机

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

来源

2017-10-12 Arek Areknawo

当你传统的光线投射我想你会得到适当的XY那么你unprojet他们得到世界的三维点空间。你是否维护轨道状态的任何变换矩阵？ –

我没有使用任何矩阵，所以这可能是一些线索。我知道在轨道控制中应用四元数的偏移矢量被添加到目标矢量。这适用于三维坐标，但我不能只选择x和z。我想我应该申请一些转变，但我不知道该做什么/做什么。 –

你有四元数和偏移矢量，你可以使用我认为的准备转换矩阵。 –

我可能在我的代码中有一些错误。经过改写和一些试验后，从飞机上获得坐标的方法运作良好。当然与实施的轨道控制。这是我的“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

来源

2017-10-15 18:57:03

ThreeJS - 项目/ raycast鼠标点击XZ飞机

回答

相关问题