交互开发必备！从模型坐标到屏幕空间坐标的坐标转换指南

前端

2022-11-12 23:19:33

在Three.js中掌握坐标转换：交互开发的基石

在Three.js的世界中，坐标转换是交互开发的基石。从模型坐标系到屏幕空间坐标系，数据的旅程需要经过四个关键步骤。理解这些步骤对于实现流畅的交互体验至关重要。

## 模型坐标系到局部坐标系

想象一下一个模型坐标系，它是模型本身的空间框架。就像模型的个人地图，它的原点位于模型的中心，X轴朝向右侧，Y轴朝向上方，Z轴指向前方。

但是，模型通常属于更大的场景，每个模型都有自己的局部坐标系。局部坐标系以其父级模型的坐标系为参照。其原点与父级模型的原点对齐，X、Y、Z轴也与父级模型的轴对齐。

从模型坐标系转换到局部坐标系需要使用模型的变换矩阵。就像一把魔法钥匙，它将模型坐标系中的点无缝地解锁到局部坐标系中。变换矩阵可以通过模型的位置、旋转和缩放属性获得。

## 局部坐标系到世界坐标系

世界坐标系是整个场景的统一体。它的原点位于场景的中心，X轴向右，Y轴向上，Z轴向前。就像一个全景地图，它将所有模型的局部坐标系联系起来。

要从局部坐标系转换到世界坐标系，需要使用模型父级模型的变换矩阵。通过父级模型的位置、旋转和缩放属性，可以获得这个变换矩阵，就像搭起一座桥梁，将模型连接到更广阔的世界中。

## 世界坐标系到标准设备坐标系

标准设备坐标系是设备的默认参考框架。它的原点位于设备的中心，X轴向右，Y轴向上，Z轴向前。就像一个转换镜头，它将世界坐标系的数据转换到设备的空间中。

这个转换的关键在于摄像机的投影矩阵。通过摄像机的视场、纵横比以及近裁面和远裁面属性，可以获得投影矩阵。它就像一个魔法放大镜，将世界坐标系放大到设备的显示区域。

## 标准设备坐标系到屏幕空间坐标系

屏幕空间坐标系是屏幕上的最终目的地。它的原点位于屏幕的左上角，X轴向右，Y轴向下，Z轴指向屏幕前方。就像一个精准的定位器，它将标准设备坐标系中的点放置在屏幕上的精确位置。

转换的最后一步使用视口矩阵，它通过视口的X、Y、宽度和高度属性获得。视口矩阵就像一个框架，它将标准设备坐标系中的点限制在屏幕的可见区域内。

## 代码示例：点亮你的交互开发

为了将这些概念付诸实践，让我们使用以下代码示例来转换一个模型的位置：

// 模型坐标系到局部坐标系
const localPosition = model.position.clone().applyMatrix4(model.parent.matrixWorld);

// 局部坐标系到世界坐标系
const worldPosition = localPosition.clone().applyMatrix4(model.parent.matrix);

// 世界坐标系到标准设备坐标系
const ndcPosition = worldPosition.clone().project(camera);

// 标准设备坐标系到屏幕空间坐标系
const screenPosition = new Vector2();
screenPosition.x = (ndcPosition.x + 1) * 0.5 * window.innerWidth;
screenPosition.y = -(ndcPosition.y - 1) * 0.5 * window.innerHeight;