您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

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

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

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

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

其他 2022/1/1 18:22:28 有460人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶