【three.js】世界坐标系和设备坐标系

本文链接：https://blog.csdn.net/weixin_42910765/article/details/125616838

本文介绍了在 three.js 中如何进行屏幕坐标到世界坐标的转换，以及世界坐标到屏幕坐标的转换过程。通过 Vector3 的 project 方法处理观察空间和裁剪空间之间的转换，详细阐述了坐标转换的数学原理和公式。此外，还提及了第三方库 CSS2DRenderer 和 CSS3DRenderer 在坐标处理中的应用。

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

three.js 坐标系转换

简述

物体的坐标转换过程大致为：局部坐标 -> 世界坐标 -> 观察空间坐标 -> 裁剪空间坐标 -> 屏幕空间坐标

我们将观察空间坐标系和裁剪空间坐标系之间的转换统一处理，最终得到标准设备坐标系

因此坐标转换过程就变成了：局部坐标 -> 世界坐标 -> 标准设备坐标 -> 屏幕空间坐标

屏幕坐标转世界坐标

ThreeJS 是使用了 canvas 画布绘制图形的，因此屏幕坐标系就是 canvas 中的坐标系，也就是左上角是坐标原点：

在 ThreeJS 中，一个物体可看作一个 Mesh，Mesh 的坐标是用一个 Vector3 来表示的，Vector3 中包含了 x、y、z 坐标。

空间坐标系是三维的，其原点默认在屏幕中心，且 x y z 的范围是 [-1,1]，因此其 x、y 轴在屏幕坐标系中的表示就是

在这里插入图片描述
通过Vector3对象的方法project，方法的参数是相机对象，语句worldVector.project(camera);返回的结果是世界坐标worldVector在camera相机对象矩阵变化下对应的标准设备坐标，标准设备坐标xyz的范围是[-1,1]。

ThreeJS 中，画布一般是全屏的，因此画布的宽高 w,h 就是：window.innerWidth 和 window.innerHeight，所以 Three 的空间坐标系中点 (cx, cy)在屏幕坐标系中就是：(w / 2,h / 2)。

假设 canvas 中有一点 (x,y)，这个点在空间坐标系中为 (x1,y1)，那么这个转换公式是：

x1=(x/w)∗2−1

y1=−(y/h)∗2+1

公式推导过程如下：

在这里插入图片描述

世界坐标转屏幕坐标

屏幕坐标转空间坐标需要经过两个步骤：屏幕坐标 -> 标准设备坐标 -> 世界坐标。
通过 Vector3对象的方法 project(camera)，返回的结果是世界坐标 worldVector在 camera相机对象矩阵变化下对应的标准设备坐标，标准设备坐标 xyz 的范围是[-1,1]。

同样的，假设画布宽为 w ，高为 h，屏幕坐标系中的一点为 (x, y)，标准设备坐标系中对应的点为 (x1, y1)

从标准设备坐标系转换到屏幕坐标系与我们前面计算出的公式相反：
在这里插入图片描述

首先计算出屏幕坐标系中心：

const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;

计算出的 centerX 和 centerY 同时也表示了坐标轴的一半大小。

然后，将设备坐标系使用 project 方法转换到标准设备坐标系，再转换到屏幕坐标系中：

const standardVec = worldVector.project(camera);

const screenX = Math.round(centerX * standardVec.x + centerX);
const screenY = Math.round