THREE.js 从 MouseClick 获取 GridHelper 坐标

如何解决THREE.js 从 MouseClick 获取 GridHelper 坐标

我如何获得我正在点击的 GridHelper 的坐标 - 或 IN -？尤其是当 Mesh 上有一个实际的地形 GridHelper 时？

我的 GridHelper 设置如下：

let  helperGrid = new THREE.GridHelper(600,120,"yellow",“blue”);

所以每条网格线之间的距离是 5（因为 600 / 12 = 5）

当我点击屏幕时，我想知道我点击了网格中的哪个位置。例如，我是否点击了第一个方块中的某个地方？这意味着在 (0,0) 和 (5,0) 之间的任意位置单击（对于 X 值），以及在 (0,0) 和 (0,-5) 之间的任意位置单击 Z 值?

我打算尝试使用我点击的鼠标坐标来计算它，我使用 mousedown 事件以通常的方式计算：

mousePositionVector.x = (event.clientX / window.innerWidth) * 2 - 1;
mousePositionVector.y = -(event.clientY / window.innerHeight) * 2 + 1;

但这转化为真正微小的十进制数。例如，当我单击第一个网格框中的任意位置（即 x = 0 和 x = 5 之间）时，我会得到鼠标位置值，例如：

 ( 0.07309721175584016,0.03186646433990892 )

或：

( 0.09269027882441594,0.02427921092564489 )

等

同时，对应的 event.clientX 和 event.clientY 值 - 对于完全相同的点击事件 - 是：

clientXY = ( 740,634 )

所以这两组价值观似乎都没有给我指明正确的方向。

除此之外，我想最终在这个网格上放置一个地形 - 这意味着我使用的 rayCaster 将捕捉我创建的地形 Mesh 的顶点，这可能会进一步使问题复杂化。

解决这个问题的正确方法是什么？

解决方法

已经有一个包含您的具体场景的演示：Raycasting with a terrain mesh（点击右下角的 Select dateadd(second,(131113622747354070 / 100000000) % (24 * 60 * 60),dateadd(day,(131113622747354070 / 100000000) / (24 * 60 * 60),'1970-01-01')) 图标查看源代码）。

当射线与地形网格相交时，它会返回一个具有以下属性的对象，as explained in the docs：<>，所以如果你想知道哪里的{ distance,point,face,faceIndex,object }坐标您悬停时，只需查看相交对象的 x,z 属性：

.point

最后，如果你想以 5 个单位的增量知道位置，只需做一个四舍五入的技巧：

function onMouseMove( event ) {

    // Get screen-space x/y
    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

    // Perform raycast
    raycaster.setFromCamera( mouse,camera );

    // See if the ray from the camera into the world hits our mesh
    const intersects = raycaster.intersectObject( terrainMesh );

    // Check if an intersection took place
    if ( intersects.length > 0 ) {
        const posX = intersects[0].point.x;
        const posZ = intersects[0].point.z;
        console.log(posX,posZ);
    }

}