WebGL坐标系、Canvas坐标系和浏览器客户区坐标转化
1.Canvas坐标系
Canvas坐标系的原点在左上角,X轴向右为正,y轴向下为正
2.WebGL坐标系
WebGL坐标系的原点在绘图区域的中心点。X轴向右为正,Y轴向上为正,Z轴向外为正。
3.浏览器客户区坐标与Canvas坐标和WebGL坐标的转换
鼠标在浏览器客户区点击的位置为:(event.clientX,event.clientY)
那么在canvas中的坐标(x,y)就是:
var rect = ev.target.getBoundingClientRect();
x = event.clientX-rect.left;
y = -(event.clientY-rect.top);
y = event.clientY-rect.top;
其中rect.left是canvas左边界距离浏览器客户区左边界的位置,rect.top是canvas上边界距离浏览器客户区上边界的位置
在webgl中的坐标位置(x,y)则为:
x = ( (event.clientX-rect.left) -canvas.width/2 )/(canvas.width/2);
y = -((event.clientY-rect.top)-canvas.height/2)/(canvas.height/2);(因为WebGL坐标系,Y轴向上为正,而Canvas坐标系向下为正。在转化的时候,坐标相减后,前面加一个负号)
也就是y = (canvas.height/2 - (event.clientY-rect.top))/(canvas.height/2);
利用上一步从canvas坐标系转换到webgl坐标系,主要的工作就是需要将坐标范围映射到(-1,1)的范围,其次是注意webgl中Y轴向上是正方向。因为WebGL坐标系,Y轴向上为正,而Canvas坐标系向下为正。在Y坐标转化的时候,坐标相减后,前面加一个负号。