三.js交叉光线投射器

Three.js intersection raycaster

本文关键字：光线投射 js      更新时间：2023-09-26

我创建了一些几何图形和一些函数来移动和检测它。 它工作得很好，但现在我已经 http://dhtmlx.com/地将其插入到javascript UI库中，并且效果不佳。问题是这样的：例如，使用光线投射器，当几何图形不在鼠标下方时，它也会找到与几何体的交集。看起来所有几何图形都从原始位置向上移动，绘制是假的。

我在这个网址中做了一个例子：http://www.felpone.netsons.org/web-threejs%20-%20Copia/contact_manager/prova2.html。您可以在控制台中查看完整的代码。

正如您在实时示例中所看到的，如果您单击立方体上方，您也可以拖动立方体。

我认为

这是因为鼠标坐标是文档坐标，而不是画布中的坐标。

在我的应用程序中，我确定光线的正确坐标，如下所示：

var mouseX = event.clientX - myCanvas.offsetLeft;
var mouseY = event.clientY - myCanvas.offsetTop;
var mouseXForRay = (mouseX / this.canvas.width) * 2 - 1;
var mouseYForRay = -(mouseY / this.canvas.height) * 2 + 1;
相关文章：