WebGL 3D概念讲解（坐标系）

齐次坐标系

image.png

坐标系

坐标原点：绘图区域的左上角。
x轴：水平向右为正。
y轴：垂直向下为正。

image.png

WebGL坐标系（坐标区间 -1.0 ~ 1.0）

坐标原点：绘图区域的中心。
x轴：水平向右为正。
y轴：垂直向上为正。

image.png

image.png

浏览器客户区坐标系

坐标原点：整个浏览器显示页面（body）的左上角。
x轴：水平向右为正。
y轴：垂直向下为正。
鼠标单击的坐标即是浏览器客户区坐标。

image.png

不同坐标系的对比

image.png

image.png