Question

我编写了一个代码来交叉一些对象并且工作正常，直到我在html文档中将canvas与其他div放在一起。现在对象上没有交集。在此实例中：http://www.felpone.netsons.org/web-threejs/index1.html如果您选择右上方的按钮交叉并尝试移动您不能的形状。如果将鼠标放在形状的右侧，可以移动形状。所以十字路口是完全错误的。我试过在stackoverflow上发布的一些解决方案，但是没有用。有人能帮我理解吗？我很绝望。

在另一个实例中，您可以看到它应该如何运作：http://www.felpone.netsons.org/web-threejs/。我尝试使用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代码：http://www.felpone.netsons.org/web-threejs/stereos.js

也许可以依赖：

我注意到画布中有两个不同的维度，您可以在此屏幕截图中看到： enter image description here

Answer 1

event.clientX是相对于浏览器窗口的。您想要相对于画布的偏移量。因此，您必须为包含画布的每个元素选择偏移量。

这是一些很好的干净代码，可以满足您的需求：https://stackoverflow.com/a/5932203/2195930

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

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

Answer 2

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

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;

Answer 3

在您的DOM中，画布显示为

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

这是脚本占据高度和宽度的位置。

然而，画布的真实尺寸来自

width: 100%;
height: 100%;

在你的CSS中

。

我会删除其中一个，这样脚本就可以没有问题地获取正确的值

与raycaster交叉的Threejs问题

3 个答案: