带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(17)

简介: 带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(17)

带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(16) https://developer.aliyun.com/article/1243463?groupCode=taobaotech



坐标系的转换


Three.js 里面有没有这样的 API 呢?依据笔者所查,并没有。因为我们忽略了另一个概念:高度。在三维空间中,我们的相机定位「视点」,还需要 Z 轴信息。Three.js 中的 API 是 camera.lookAt(x, y, z),该 API 可以旋转相机使其在世界空间中面朝一个点。


把刚才的经纬度坐标映射为三维空间的某个点,需要应用到一些数学知识:经纬度坐标系与三维笛卡尔坐标系转换。


将经纬度坐标系转换为三维笛卡尔坐标系:


image.png



将三维笛卡尔坐标系转换为经纬度坐标系:


image.png


只要理解其数学公式和其推导过程,我们就能通过实现代码该转换算法。文章篇幅有限不再对数学部分展开,其转换算法的代码实现如下:


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 度


执行效果(观察两秒后视角的变化):


image.png



带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(18) https://developer.aliyun.com/article/1243461?groupCode=taobaotech


相关文章
|
前端开发
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(4)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(4)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(4)
|
存储 JavaScript 前端开发
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(11)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(11)
127 0
|
编解码 前端开发
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(20)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(20)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(13)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(13)
|
新零售 前端开发 API
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(19)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(19)
|
新零售 图形学 容器
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(9)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(9)
|
编解码
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(8)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(8)
111 0
|
前端开发
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(5)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(5)
105 0
|
定位技术 图形学
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(16)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(16)
108 0
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(14)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(14)