当前位置: 首页 > 面试题库 >

如何从鼠标单击坐标获取WebGL 3d空间中的对象

卢知
2023-03-14
问题内容

我正在用WebGL构建桌游。该板可以旋转/缩放。我需要一种将对画布元素(x,y)的单击转换为3D空间(x,y,z)中相关点的方法。最终结果是我想知道(x,y,z)坐标,该坐标包含接触最接近用户的对象的点。例如,用户单击一块,您想象一条射线穿过3D空间同时穿过该块和游戏板,但是我希望该块的(x,y,z)坐标位于原点感动。

我觉得这肯定是一个非常普遍的问题,但是我似乎无法在Google中找到解决方案。必须有某种方法将3D空间的当前视图投影到2D中,以便可以将2D空间中的每个点映射到3D空间中的相关点。我希望用户能够将鼠标悬停在板上的某个空间上,并使专色变色。


问题答案:

您正在寻找一个unproject函数,该函数将屏幕坐标转换为从摄像机位置到3D世界的光线。然后,您必须执行光线/三角形相交测试,以找到最接近相机且与光线相交的三角形。

我在jax /camera.js#L568上有一个非投影示例-但您仍然需要实现ray/triangle相交。我在jax/triangle.js#L113有一个实现。

但是有一个更简单(通常)更快的替代方法,称为“挑选”。如果要选择整个对象(例如,一个棋子),并且不关心鼠标实际单击的位置,请使用此选项。WebGL的方法是将整个场景以各种蓝色阴影(蓝色是关键,而红色和绿色用于场景中对象的唯一ID)渲染为纹理,然后从中读取像素那种质地。将RGB解码为对象的ID将为您提供被单击的对象。同样,我已经实现了它,并且可以在jax/world.js#L82上找到。

两种方法都各有利弊(在这里和后面的一些评论中讨论),您需要确定哪种方法最适合您的需求。在大型场景中选择速度较慢,但​​是在纯JS中进行投影非常慢(因为JS本身并不是那么快),所以我的最佳建议是尝试两者。



 类似资料:
  • 本文向大家介绍python点击鼠标获取坐标(Graphics),包括了python点击鼠标获取坐标(Graphics)的使用技巧和注意事项,需要的朋友参考一下 使用Python进行图像编程,要使用到Graphics库。下面列举出较常用的代码 接下来使用Graphics库进行编写 出现下面问题:name '_name_'is not defined.出现原因是下划线应该是两个(__'name'__)

  • 问题内容: JFreeChart中是否有一种方法可以从ChartMouseEvent中确定鼠标悬停在绘图空间中的x,y坐标?我尝试使用域十字线值,但这似乎不准确并且滞后于实际的鼠标事件。 谢谢, 杰夫 问题答案: 鼠标坐标相对于ChartPanel,因此您需要对其进行转换:

  • 我使用以下方法从拉多边形中获取多边形: 但是,我正在尝试从多边形获取坐标,但我不能: poligon@polygons[1]类“Polygons”Slot“Polygon”的对象:[1]类“多边形”Slot”labpt“的对象:[1]-46.37327-23.91955 提前致谢

  • 问题内容: 斯威夫特新手。 我在执行一项琐碎的任务时遇到了麻烦。我要做的就是 按需 获取鼠标光标的x,y坐标。我宁可 不要 等到鼠标移动事件触发后再抓住指针的坐标。 将不胜感激! 问题答案: 您应该看看NSEvent方法mouseLocation 编辑/更新: Xcode 11•Swift 5.1 如果您希望在应用程序处于活动状态时监视任何窗口上的事件,则可以添加与mouseMoved掩码匹配的L

  • 问题内容: 将click事件处理程序添加到canvas元素(将返回click的x和y坐标)(相对于canvas元素)的最简单方法是什么? 不需要旧版浏览器兼容性,Safari,Opera和Firefox都可以。 问题答案: 这个答案很老了,它使用检查不再需要的旧浏览器,因为和属性在所有当前浏览器中都有效。您可能想查看PatriquesAnswer,以获得更简单,最新的解决方案。 最初的答案: 正如

  • 本文向大家介绍使用js获取鼠标坐标相关面试题,主要包含被问及使用js获取鼠标坐标时的应答技巧和注意事项,需要的朋友参考一下