Threejs raycast没有返回正确的点

Question

我有一个正在读取的 JSON 字符串，它有一个 x 和 y 坐标列表，我用于某些 BoxGeometry 的位置。

我有一个光线投射器设置，因此当我将鼠标悬停在带有体素的网格上时，它会返回光线投射命中的位置。然后它将命中点 x 和 z 舍入到最接近的 int，并从 JSON 字符串中获取该 x 和 z 的附加数据并将其显示在弹出窗口中。

我的问题是，光线投射说当它在空白区域上时它会击中物体，而不是说当它在某些网格区域上时它会击中它们。

您可以在此处查看演示：https://sleepy-bayou-1572.herokuapp.com/（加载可视化工具可能需要大约 20 秒，它具有标准的轨道鼠标控件）。

这里是浏览器端javascript的来源：https://sleepy-bayou-1572.herokuapp.com/bundle.js（三个东西在文件的底部）

在演示中，您可以看到当您的鼠标不在网格上时它会显示弹出窗口，并且在某些地方它不会显示。

我的一个猜测是光线投射的投射方向不正确，但我不知道有什么方法可以检查投射在哪里，因为我还是新手。

更新 #1

@6502 的回答部分是问题所在，当我修复我开始获取正确值时。

现在我有一个新问题，我刚刚修复了页面上的 CSS，以便三个的画布放置在该标题下方，我将所有对 window.innerHeight 的引用更改为高度减去导航栏大小的变量（52px），它又远了。看起来有些东西没有正确调整到高度。

更新 #2

是否可以设置纵横比、标准化鼠标坐标等以使用renderer.domElement 的大小？我在页面大小和布局可能会发生一些变化的情况下创建它，因此不必每次都手动设置窗口的偏移量。

这可能会嵌入到 iframe 中，所以这很重要。

Answer 1

问题是你在标准化鼠标坐标计算中有一个错字（使用windowHeight 两次而不是宽度和高度）：

function onDocumentMouseMove(event) {

    event.preventDefault();

    mouse.x = (event.clientX / windowHeight) * 2 - 1;
    mouse.y = -(event.clientY / windowHeight) * 2 + 1;

}

代码应该改为

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