Question

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

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

我的问题是，光线投影说当它在空白区域时它会碰到东西，并且当它在某些网格上方时它没有说它会撞击它们领域

你可以在这里看到一个演示：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;

Threejs光线投射没有返回正确的点

1 个答案: