Javascript 与raycaster相交的三个JS问题

我编写了一个与某个对象相交的代码，在将canvas和其他div放在html文档中之前工作得很好。现在，对象上没有交点。在这个活生生的例子中：如果你选择了右上角的十字按钮并尝试移动你不能移动的形状。若你们把鼠标稍微放在形状的右边，你们可以移动这个形状。所以十字路口是完全错误的。我尝试了一些在stackoverflow上发布的解决方案，但没有成功。有人能帮我理解吗？我绝望了

在另一个实时示例中，您可以看到它应该如何工作：。 我尝试了在Stackoverflow上编写的其他解决方案，但没有结果

可能取决于鼠标坐标：

mouse2D.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
mouse2D.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;

---

在这里您可以看到javascript代码：

也许可以通过以下方式确定：

我注意到画布有两种不同的维度，正如您在这个屏幕截图中看到的：

---

尝试按如下方式更改代码：

var x = event.offsetX == undefined ? event.layerX : event.offsetX;
var y = event.offsetY == undefined ? event.layerY : event.offsetY;

mouse2D.x = ( x / renderer.domElement.width ) * 2 - 1;
mouse2D.y = - ( y / renderer.domElement.height ) * 2 + 1;

---

在DOM中，画布显示为

<canvas width="1139" height="975"></canvas>

在你的CSS中

---

我会删除其中一个，这样脚本就可以毫无问题地获取正确的值。clientX是相对于浏览器窗口的。您需要相对于画布的偏移。因此，必须为包含画布的每个元素选择偏移量

这是一些很好的干净代码，可以实现您想要的功能：

我每次在画布上处理鼠标时都会使用此代码

---

如果您有一个更简单的测试用例，我会尝试为您模拟整个解决方案

这里您可以看到javascript代码：请参阅提示：避免每次鼠标移动时实例化新的

Raycaster

和

Vector3

。创建一个并重用它们。你在上面的屏幕截图中圈出的标签并不重要。重要的是实际数字（您圈出的最上面的数字）。如果用户调整浏览器的大小，则顶部数字可能会改变。根据我下面的回答，您需要查询包含偏移量的值。

width: 100%;
height: 100%;