蚁人论坛 (iYenn.com)

前言

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 上的坐标：


javascript
 代码解读
复制代码
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)：


javascript
 代码解读
复制代码
let pointx = ((280 - 30) - 250) / 250 = 0;
let pointy = (250 - (270 - 20)) / 250 = 0;

屏幕坐标为 (280, 20):


javascript
 代码解读
复制代码
let pointx = ((280 - 30) - 250) / 250 = 0;
let pointy = (250 - (20 - 20)) / 250 = 1;

后语

知识无价，支持原创！这篇文章就介绍到这里。

喜欢霖呆呆的小伙伴还希望可以关注霖呆呆的公众号 LinDaiDai

我会不定时的更新一些前端方面的知识内容以及自己的原创文章🎉。

你的鼓励就是我持续创作的主要动力 😊。

前言