Threejs raycast 没有返回正确的点

Question

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

我有一个光线投射器设置，因此当我将鼠标悬停在带有体素的网格上时，光线投射命中的位置 returns。然后它将命中点 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，以便三个的 canvas 位于 header 下方，我更改了所有引用到 window.innerHeight 到一个高度减去导航栏大小（52px）的变量，它又走了。看起来有些东西没有正确调整到高度。

更新 #2

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

这可能会嵌入到 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;

Threejs raycast 没有返回正确的点

Threejs raycast not returning the correct point

javascript

jquery

json

three.js

raycasting