前言
Hello！各位小伙伴大家好，相信大家在学习完全网最详Babylon.js入门教材后都有了一些 3D 基础。学 3D 开发，其中还有一项很重要的就是数学知识。简单一些的如下：
本篇是我整理的一些关于坐标系相关的知识点，方便你的记忆。
1、笛卡尔坐标系
笛卡尔坐标系就是直角坐标系和斜角坐标系的统称。 相交于原点的两条数轴，构成了平面仿射坐标系。
二维坐标系：
三维坐标系：
斜角坐标系：
互相垂直且有公共原点的两条数轴构成平面直角坐标系，而如果坐标系中两条坐标轴不垂直，那么这样的坐标系称为“斜坐标系”。
其它坐标系：
除了笛卡尔坐标系，还有其它的坐标系：
1、平面极坐标系
2、柱坐标系
3、球坐标系
2、左右手坐标系
（一）关于坐标轴的颜色：
一般来说，会这样定义：
- 红色：
x轴 - 绿色：
y轴 - 蓝色：
z轴
（二）Unreal 和 Unity 、Babylon.js都是左手坐标系：
同样都是左手坐标系，但是有可能 Z 轴正向为上，也可能 Y 轴正向为上。
例如：
Unreal 为左手坐标系，但是 Z 轴正向为上：
Unity 和 Babylon.js 也为左手坐标系，但是 Y 轴正向为上：
Unreal 绕着 X 轴顺时针旋转90度，就是 Unity 坐标系。
（三）WebGL 和 Three.js 为右手坐标系：
WebGL 的右手坐标系：
Three.js 也是右手坐标系。
（四）如何更好的判断左右手坐标系？
推荐文章：zhuanlan.zhihu.com/p/653485946
3、局部坐标系
英文：Local Coordinate System。场景中的每个物体都有自己的局部坐标系，比如我们在建立一个立方体时，往往会把局部坐标系的原点放在立方体的体心或一个顶点上。
作用：用于构建物体内部间的位置关系。
4、世界坐标系
英文：World Coordinate System。可以理解为整个场景的全局坐标系，用来描述物体间的位置关系。
5、观察坐标系(视域坐标系)
英文：Viewing Coordinate System。也被称为摄影坐标系。以视点的位置为原点，视线方向（或反方向）为z轴，通过用户定义的一个向上的观察矢量来定义y轴，通过叉乘确定x轴。
作用：用于指定图形的输出范围，从观察者的角度对整个世界坐标系内的对象进行重新定位和描述，从而简化几何物体在投影面成像的数学推导和计算。类似于我们 3D 中的相机视角。
6、投影坐标系(成像面坐标系)
一个二维坐标系统，一般通过指定成像面与视点之间的距离来定义成像面，可进一步在成像面上定义名为窗口的方形区域来实现部分成像。指定物体在成像面上所有的点。
类型：
- 高斯-克吕格投影：主要用于大范围地图的制作，如国家地图和大地测量。
- 兰伯特投影：适用于中等尺度的地图，如地区地图和城市规划图。
- 墨卡托投影：常用于在线地图服务和航海图，能够保持方向和距离的准确性。
- UTM投影：广泛应用于军事和地理信息系统（GIS），能够提供精确的地理位置信息。
7、屏幕坐标系(设备坐标系)
英文：Device Coordinates。又名：设备坐标系。与图形显示设备相关的坐标系。如显示器或打印机的坐标系。
原点位于屏幕客户区的左上角，x轴水平方向为正，y轴垂直向下为正，基本单位为像素。
在定义了成像窗口的情况下，可进一步在屏幕坐标系中定义名为视图区的有界区域，视图中的成像即为实际所能观察到的内容。
作用：某些特殊的计算机图形显示设备（如光栅显示器）表面的点的定义。
几种坐标系的联系：为了在三维空间创建并显示几何物体，必须首先建立世界坐标系。然后，需要指定视点的方位、视线和成像面的方位，定义观察坐标系。为了观察到物体的成像，还必须在各坐标系实现变换之后，进行投影变换，才能得到物体的成像。
8、WebGL 坐标系与屏幕坐标系的关系
9、WebGL 坐标系与 Canvas 坐标系的转换
鼠标在屏幕坐标系上的某个点，要转为 WebGL 上的坐标：
let x = e.clientX;
let y = e.clientY;
let halfTheWithOfCanvas = 500 / 2;
let halfTheHeightOfCanvas = 500 / 2;
let rect = e.target.getBoundingClientRect();
let pointx = ((x - rect.left) - halfTheWithOfCanvas) / halfTheWithOfCanvas;
let pointy = (halfTheHeightOfCanvas - (y - rect.top)) / halfTheHeightOfCanvas;
以 webgl 的原点为例：
屏幕坐标为 (280, 270)：
let pointx = ((280 - 30) - 250) / 250 = 0;
let pointy = (250 - (270 - 20)) / 250 = 0;
屏幕坐标为 (280, 20):
let pointx = ((280 - 30) - 250) / 250 = 0;
let pointy = (250 - (20 - 20)) / 250 = 1;
后语
知识无价，支持原创！这篇文章就介绍到这里。
喜欢霖呆呆的小伙伴还希望可以关注霖呆呆的公众号 LinDaiDai
我会不定时的更新一些前端方面的知识内容以及自己的原创文章🎉。
你的鼓励就是我持续创作的主要动力 😊。
