带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(16) https://developer.aliyun.com/article/1243463?groupCode=taobaotech
坐标系的转换
Three.js 里面有没有这样的 API 呢？依据笔者所查，并没有。因为我们忽略了另一个概念：高度。在三维空间中，我们的相机定位「视点」，还需要 Z 轴信息。Three.js 中的 API 是 camera.lookAt(x, y, z)，该 API 可以旋转相机使其在世界空间中面朝一个点。
把刚才的经纬度坐标映射为三维空间的某个点，需要应用到一些数学知识：经纬度坐标系与三维笛卡尔坐标系转换。
将经纬度坐标系转换为三维笛卡尔坐标系：
将三维笛卡尔坐标系转换为经纬度坐标系：
只要理解其数学公式和其推导过程，我们就能通过实现代码该转换算法。文章篇幅有限不再对数学部分展开，其转换算法的代码实现如下：
function locate(longitude = 0, latitude = 0, fov = 90) { const modifiedLat = Math.max(-90, Math.min(90, latitude)); const phi = THREE.MathUtils.degToRad(90 - modifiedLat); const theta = THREE.MathUtils.degToRad(longitude + 180); const distance = 1; // 球的半径 const x = distance * Math.sin(phi) * Math.cos(theta); const y = distance * Math.cos(phi); const z = distance * Math.sin(phi) * Math.sin(theta); camera.lookAt(x, y, z); camera.fov = fov; }
向左移动 20 度：
locate(0, 0, 90); // 初始化视点和视野 setTimeout(() => locate(-20), 2000); // 两秒后视点向左移动 20 度
执行效果（观察两秒后视角的变化）：
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(18) https://developer.aliyun.com/article/1243461?groupCode=taobaotech
