three.js地理坐标系有哪些，和屏幕坐标系的转换。

坐标系很好理解，就是点线面体的位置，一个点是一个坐标，一条线段2个坐标，一个矩形四个坐标，一个立方体8个坐标，three.js面对的是三维空间，屏幕则是二维的，这就面临着转换问题，贝格前端工场借助本文为大家浅释一下。

一、three.js的常见坐标系

在Three.js中，地理坐标系通常指的是用于表示三维空间中位置和方向的坐标系。在Three.js中，常见的地理坐标系包括以下几种：

1. 笛卡尔坐标系（Cartesian Coordinates）：

这是最常见的三维坐标系，使用三个轴（x、y、z）来表示空间中的点。x轴通常表示水平方向，y轴表示垂直方向，z轴表示深度方向。

2. 极坐标系（Polar Coordinates）：

极坐标系使用距离和角度来表示点的位置。在Three.js中，可以使用极坐标系来表示某个点相对于另一个点的距离和角度。

3. 大地坐标系（Geographic Coordinates）：

大地坐标系用来表示地球表面上的点的位置。通常使用经度（longitude）和纬度（latitude）来表示地球上的位置，有时也会包括高度（altitude）信息。

除了上述提到坐标系，还有一些其他常见的坐标系在计算机图形学和三维图形编程中也经常会遇到，包括：

4. 球面坐标系（Spherical Coordinates）：

球面坐标系使用半径、极角和方位角来表示三维空间中的点的位置。这种坐标系在描述球体表面上的点的位置时非常有用。

5. 纹理坐标系（Texture Coordinates）：

纹理坐标系用来表示在二维纹理图像上的点的位置。通常使用(u, v)坐标来表示纹理图像中的位置，这种坐标系在进行纹理映射和纹理贴图时非常重要。

6. 局部坐标系（Local Coordinates）和世界坐标系（World Coordinates）：

在三维图形编程中，通常会涉及到对象的局部坐标系和世界坐标系。局部坐标系是相对于对象自身的坐标系，而世界坐标系是相对于整个场景的坐标系。

这些坐标系在不同的场景和需求中都有各自的用途，开发人员在进行三维图形编程时需要根据具体的情况选择合适的坐标系来进行操作。

二、three.js坐标系的作用

在 three.js 中，坐标系扮演着至关重要的角色，它对于描述和定位三维空间中的对象位置、方向和旋转等信息非常关键。具体来说，three.js 中的坐标系有以下几个作用：

1. 描述对象位置：

通过三维坐标系，可以准确地描述和定位场景中的各个对象的位置。在 three.js 中，通常使用笛卡尔坐标系来描述对象的位置，其中 x 轴表示水平方向，y 轴表示垂直方向，z 轴表示深度方向。

2. 控制对象旋转和方向：

坐标系可以用来描述对象的旋转角度和朝向。通过欧拉角或四元数等方式，可以在 three.js 中对对象进行旋转，从而改变其朝向和方向。

3. 进行相机和视图的控制：

在 three.js 中，相机的位置和朝向也是通过坐标系来描述的。通过调整相机的位置和朝向，可以改变观察场景的视角和视野范围。

4. 碰撞检测和交互操作：

坐标系对于进行碰撞检测和交互操作也非常重要。通过比较对象之间的位置和方向信息，可以进行碰撞检测，同时也可以根据鼠标或触摸输入的坐标来进行交互操作。

three.js 中的坐标系在描述和控制三维空间中的对象位置、旋转、相机视角等方面发挥着至关重要的作用。开发人员需要对坐标系的概念和使用方法有深入的理解，才能更好地进行三维图形编程和图形渲染。

三、三维坐标系投影到二维屏幕

这些坐标系和屏幕坐标系之间存在一定的关联，因为它们通常用于描述和定位三维空间中的对象，最终需要将其投影到二维屏幕上显示给用户。

1. 笛卡尔坐标系和屏幕坐标系：

在计算机图形学中，屏幕坐标系通常使用左上角为原点，x轴向右，y轴向下的二维坐标系来表示屏幕上的像素位置。而笛卡尔坐标系用于描述三维空间中的点的位置，需要通过投影变换将其映射到屏幕坐标系上显示。

2. 大地坐标系和屏幕坐标系：

大地坐标系用于描述地球表面上的点的位置，通常使用经度和纬度来表示。当需要在地图应用中将地理位置显示在屏幕上时，需要进行地图投影等处理，将地球表面上的点映射到屏幕坐标系上。

3. 纹理坐标系和屏幕坐标系：

纹理坐标系用于描述纹理图像上的点的位置，通常使用(u, v)坐标表示。当需要在屏幕上显示纹理贴图时，需要将纹理坐标系中的点映射到屏幕坐标系上。

这些不同的坐标系都需要通过投影变换或映射操作，将其中描述的位置信息最终映射到屏幕坐标系上，以便在屏幕上进行显示。因此，对于三维图形编程和图形渲染来说，坐标系之间的转换和映射是非常重要的。

四、转化方法和代码

在 three.js 中，将不同坐标系的坐标转换为屏幕坐标可以通过使用相机的投影矩阵和视图矩阵来实现。下面是一个简单的示例代码，演示了如何将笛卡尔坐标系中的点转换为屏幕坐标：

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体对象
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 将笛卡尔坐标系中的点转换为屏幕坐标
var vector = new THREE.Vector3(1, 2, 3);
vector.project(camera);

// 将归一化的坐标转换为屏幕坐标
var widthHalf = window.innerWidth / 2;
var heightHalf = window.innerHeight / 2;
var result = new THREE.Vector3();
result.x = (vector.x * widthHalf) + widthHalf;
result.y = -(vector.y * heightHalf) + heightHalf;

console.log('屏幕坐标：', result.x, result.y);

// 渲染场景
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

在这个示例中，我们首先创建了一个场景、相机和立方体对象。然后，我们创建了一个三维向量 vector，表示笛卡尔坐标系中的点 (1, 2, 3)，并使用 project 方法将其转换为归一化的坐标。最后，我们将归一化的坐标转换为屏幕坐标，并输出到控制台中。

对于大地坐标系、纹理坐标和球面坐标的转换，可以根据具体的需求和场景进行相应的处理。通常情况下，大地坐标系需要进行地图投影转换，纹理坐标需要考虑纹理映射的方式，球面坐标需要考虑球面坐标系到笛卡尔坐标系的转换等。不过上述示例代码可以为你提供一个基本的思路和参考。

结束语：本位带领大家入门一下，坐标其实非常好理解，就是定位到你当前的你当前的位置，先找到你，然后才能对你施加各种动作。

首发2024-01-25 16:04·贝格前端工场