将event.offsetX和event.offset Y的坐标转换为webGL本机坐标

Convert coordinates from event.offsetX and event.offsetY into webGL native coordinates

本文关键字：坐标 event 转换本机 webGL offsetX offset 更新时间：2023-11-10

我有一个用JavaScript编写的webGL程序，我必须在画布上用户点击的地方画一个点。要做到这一点，我需要获得用户单击的位置的坐标。我通过使用JavaScript的event.offsetX和event.offsetY来获得相对于画布左上角的点的坐标来实现这一点。这里的问题是，webGL使用不同的坐标系，其中坐标相对于画布的中心。关于如何将event.offsetX和event.offsetY坐标转换为webGL的坐标，有什么想法吗？

WebGL与任何其他三维图形环境一样，在不同于画布处理的坐标系中运行。X/Y/Z的值从-1.0到1.0，而不是像素。如果您试图从屏幕坐标（像素）转换为标准化设备坐标（NDC），过程相当简单（见下文），但如果您试图转换为场景的坐标系，则这在很大程度上取决于您将场景投影到屏幕上的方式。

在这篇文章中，阅读标题为标准化设备坐标的部分，了解有关在屏幕坐标和NDC之间转换的更多信息和示例。