在 Three.js 中，我们通常使用三维场景和物体来创建 3D 图形。但是，有时我们需要将一个物体的三维位置转换为它在屏幕上的位置。这个过程涉及到将世界坐标系的点转换为屏幕坐标系的点，也被称为从“三维世界”到“二维屏幕”的投影过程。
投影简介
在计算机图形学中，投影是将三维空间中的点映射到二维平面上的一种技术。Three.js 提供了多种不同类型的投影方法，包括正交投影（Orthographic），透视投影（Perspective）等。在本文中，我们将探讨如何使用 Three.js 的透视投影来将世界坐标转换为屏幕坐标。
透视投影的原理
透视投影是一种将远处的物体看起来比近处的物体更小的投影方式。在 Three.js 中，透视投影可以通过 PerspectiveCamera 类实现。透视投影会将物体的位置，方向和角度转换为摄像机视锥体内的坐标，并将其映射到屏幕坐标系上。
将世界坐标转换为屏幕坐标
要将 Three.js 中的世界坐标转换为屏幕坐标，我们需要进行以下步骤：
- 创建一个透视投影摄像机。例如：
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); - 计算相机的位置和朝向（也就是“眼睛”位置）。例如：
camera.position.set(0, 0, 5); - 将世界坐标转换为相机坐标系中的坐标。例如：
const vector = new THREE.Vector3(x, y, z); camera.worldToLocal(vector); - 在计算出相机坐标系中的坐标后，使用 Three.js 提供的
project()方法将其映射到屏幕坐标系上。例如：vector.project(camera); - 最后，通过将屏幕坐标系中的值从 [-1, 1] 转换到屏幕像素坐标中的值，即可得到最终的屏幕坐标点。
下面是一个完整的示例代码，演示了如何将 Three.js 中的世界坐标转换为屏幕坐标：
-- -------------------- ---- ------- -- ---- ----- ----- - --- -------------- -- ---- ----- -------- - --- -------------------- ----- -------- - --- ------------------------- ------ -------- --- ----- ---- - --- -------------------- ---------- ---------------- -- ----- ----- ------ - --- --------------------------- ----------------- - ------------------- ---- ------ ---------------------- -- --- -- ------ ----- -------- - --- ---------------------- ----------------------------------- -------------------- ----------------------------------------------- -- ------------ ----- ------ - --- ------------------------------ ---------------- ----------------- ---------------------------- ----------------------- ----- - - --------- - -- - ----------------- - -- ----- - - ---------- - -- - ------------------ - -- -- ------- ----- --- - ------------------------------------- ---------------- ---------- -- --- -- ------- - --- ------------- - ------ ----------- -- ---- --------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------
