webgl坐标系和canvas2d坐标系转换，简单易懂版

宁长风

已于 2022-03-23 15:49:05 修改

阅读量589

点赞数 2

CC 4.0 BY-SA版权

分类专栏： webgl 文章标签： webgl坐标系转换

于 2022-03-23 15:47:15 首次发布

本文链接：https://blog.csdn.net/weixin_43663775/article/details/123687908

webgl 专栏收录该内容

3 篇文章

订阅专栏

这篇博客探讨了WebGL和Canvas2D坐标系统的差异，重点在于如何将2D坐标转换为WebGL坐标。当需要处理鼠标点击事件时，可以通过提供的代码示例将鼠标在2D坐标系中的位置转换为WebGL坐标系，以便于在3D场景中正确交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webgl坐标系：中心点为(0, 0)

canvas 2d坐标系：左上角顶点为(0, 0)

当我们需要用到鼠标点击的时候，只能获取到2d的坐标值，通过下面的代码就可以转换，有用收藏点赞了~

canvas.addEventListener('click', ({clientX, clientY}) => {
        let w = canvas.offsetWidth / 2,
            h = canvas.offsetHeight / 2,
            webglX = (clientX - w) / w, 
            webglY = (h - clientY) / h;
            // 其余代码......
})