Three.js 地理座標和三維空間座標的轉換

奇技指南 本文做者高峯，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）。

座標轉換

三角函數計算法

基於上述得出的經緯度和球體建立時角度的對應關係，結合三角函數，咱們應該能夠很方便地算出對應的三維座標，以下：

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

以下轉換爲JS代碼：

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中的球面座標類，用法以下：

• 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自帶的方法來轉換經緯度時能夠用如下方法:

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))
},

關於360技術 360技術是360技術團隊打造的技術分享公衆號，天天推送技術乾貨內容 更多技術信息歡迎關注「360技術」微信公衆號