将event.offsetX和event.offsetY中的坐标转换为webGL本机坐标

Question

我有这个用JavaScript编写的webGL程序，我必须在用户点击的地方的画布上绘制一个点。为此，我需要获取用户单击的位置的坐标。我通过使用JavaScript的event.offsetX和event.offsetY来获取相对于画布左上角的点的坐标。这里的事情是webGL使用不同的坐标系，其中坐标相对于画布的中心。关于如何将event.offsetX和event.offsetY坐标转换为webGL坐标的任何想法？

Answer 1

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

在this post中，请阅读标题为规范化设备坐标的部分，以获取有关在屏幕坐标和NDC之间进行转换的更多信息和示例。