奇技指南

本文作者高峰，360奇舞團前端工程師，W3C性能工作組/WOT工作組成員

本文轉載自奇舞周刊

引言

在實現3D地球時，球面是通過地理貼圖渲染的。所以我們所說的地理坐標和三維空間坐標的轉換，是指將地理貼圖上的坐標，轉換為球面坐標(https://en.wikipedia.org/wiki/Spherical_coordinate_system)，即three.js中的三維坐標。

在介紹他們之間如何轉換之前，我們先來了解下這兩種坐標。

地理坐標(貼圖坐標)

一個完整的地理貼圖坐標 (https://zh.wikipedia.org/wiki/%E5%9C%B0%E7%90%86%E5%9D%90%E6%A0%87%E7%B3%BB)如下，其中第一張為簡圖，能夠幫我們快速理解經緯度與地理坐標，第二張為詳細經緯度分布圖。

可以看出貼圖橫向表示經度，范圍[-180(西經),180(東經)]，豎向表示緯度[-90(南緯), 90(北緯)]，因此坐標轉化就成了經緯度到球面坐標的轉化。

球面坐標

在three.js中，創建球體時有以下幾個重要參數：

• 半徑(radius)以及分段數
• 水平方向起始角度(phiStart)
• 水平方向角度大小(phiLength)
• 垂直方向起始角(thetaStart)
• 垂直方向角度大小(thetaLength)

其中phiStart的默認值0，起始點為x軸負方向。thetaStart的默認值也為0，起始點為z軸正方向。如下圖所示：

如上圖，其中phi的值為0-Math.PI*2，對應的經度范圍為-180到180，所以與經度對應的phi應為180+lng(lng為經度longitude)。theta的值為0-Math.PI，對應的緯度為90到-90，所以與緯度對應的theta值應為90-lat(lat為緯度latitude)。

坐標轉換

三角函數計算法

基于上述得出的經緯度和球體創建時角度的對應關系，結合三角函數，我們應該可以很方便地算出對應的三維坐標，如下：

x = - r * sin(theta) * cos(phi)y = r * cos(theta)z = r * sin(theta) * sin(phi)

如下轉換為JS代碼：

function lglt2xyz(lng, lat, radius) { const phi = (180 + lng) * (Math.PI / 180) const theta = (90 - lat) * (Math.PI / 180) return { x: -radius * Math.sin(theta) * Math.cos(phi), y: radius * Math.cos(theta), z: radius * Math.sin(theta) * Math.sin(phi), }}

three.js自帶方法

除了上述直接用三角函數來算以外，我們也可以通過Three.js中的提供的方式來計算。主要涉及THREE.Spherical和THREE.Vector3

THREE.Spherical

THREE.Spherical是three.js中的球面坐標類，用法如下：

var spherical = new THREE.Spherical(radius,phi,theta)

其中的三個參數含義分別如下：

• radius：半徑，默認為1
• phi: 以y軸正方向為起點的垂直方向弧度值，默認0
• theta: 以z軸正方向為起點的水平方向弧度值，默認0

可以看出，這里的球面坐標類與我們在定義球時所用的球面坐標中的角是有區別的。phi和theta與上面恰恰相反。對應關系分別為(加’的為此處的角度):

• phi’ = theta = 90 - lat
• theta’ = phi - 90 = 90 + lng

THREE.Vector3

THREE.Vector3用于表示三維向量，它有一個setFromSpherical的方法，顧名思義，表示可以從球面坐標得到三維向量坐標。其實，three.js中可以可以實現球面坐標和三維坐標的相互轉換，THREE.Spherical也存在類似的setFromVector3方法。

綜上，通過three.js自帶的方法來轉換經緯度時可以用以下方法：

lglt2xyz(lng, lat, radius) { const theta = (90 + lng) * (Math.PI / 180) const phi = (90 - lat) * (Math.PI / 180) return (new THREE.Vector3()).setFromSpherical(new THREE.Spherical(radius, phi, theta))},

總結

以上是生活随笔為你收集整理的2d与2.5d坐标转换_Three.js 地理坐标和三维空间坐标的转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。