threejs建立地球

上個月底，在朋友圈看到一個号稱“這可能是地球上最美的h5”的分享，點進入後發現這個h5還很别緻，思考了一會，決定要不高仿一個?

到今天為止，高仿基本完成，

線上位址
github位址

除了手機端的media控制沒有去相容，其他的基本都給仿了。那為了讓你覺得是高仿，最好使用chrome的手機調試模式進行通路。微信打開将聽不見聲音看不到視訊... （後面再有時間看是不是仿的再進一步）

之是以要仿它，因為覺得這個h5還挺酷，想看看自己需要花多長時間找到并實作它的技術路徑。

需求分析

這個h5的主要玩法很簡單：地球自轉的時候會播放背景音樂（比如海浪聲），為了找到這個聲音是從哪個地球上哪個地方傳來的，需要長按下方的按鈕，這時地球會自動轉動到目标地點，然後鏡頭拉近，穿過雲層，最後你會看到和這段聲音相關的視訊内容；松開手之後，上面的過程會倒退回去，地球又開始自轉，播放着下段神秘的背景音樂。

個人覺得這個設計還是很新穎的，不是說用了3D的效果，而是将一個看起來很複雜的動畫（從宇宙拉近到地表的過程），使用最基礎的3D效果和其他一些正常的動畫手法去實作，并且能流暢的運作在手機浏覽器上。另外還有聲音和視訊的完美搭配，使用者體驗不錯。

反複觀察，理清頁面功能：

加載：加載進度百分比，饒橢圓軌道運作的小行星作為loading動畫（這個動畫我沒有做）
地球：3D球體，旋轉入場動畫，自轉，漂移的雲層，城市的坐标點，鏡頭的旋轉與拉近，穿越雲層動畫
星空背景：靜态星空背景圖，動态（閃爍的）星星，劃過的流星
隐藏的音頻和視訊：按内容（地理位置）劃分的音頻和視訊内容
其他：操作指引示意動畫，地球上方會顯示目前城市的經緯度，“了解更多”的結語頁面等

尋找技術路徑

打開chrome inspect一下。

首先是這個地球，得看看它是真3D還是假3D（因為很多3D效果是拿雪碧圖做的，比如這裡的旋轉的3D飛機），結果找到了：

<div class="ns-webgl-page">
    <canvas width="750" height="1200" style="width: 375px; height: 600px;"></canvas>
</div>

并且在網站source檔案中搜到了THREE，那就是threejs沒跑了。

然後是那個穿越雲層的效果，猜測可能是GIF，可能是SpriteSheet Animation，也有可能是一段視訊。但是考慮到這個穿越的動畫可以正反雙方播放，那麼就很可能是是SpriteSheet Animation了，否則GIF或者視訊檔案需要兩個動畫方向各準備一份。這個從chrome debug工具的network下找到了證據—— 頁面下載下傳了一系列名為

kf_cloud_0000X.jpg

的圖檔檔案。順手就把它們down下來，備用。

再就是背景音樂和隐藏視訊的問題，同樣在network下，找到了兩個檔案，一個mp3一個mp4，每個檔案都包含了所有片段，就像是media的雪碧圖，隻在需要的時候控制播放對應片段而已。

其他的内容都沒什麼問題，CSS動畫或者CANVAS都好做。那麼到此，技術路徑都清楚了，準備開始寫代碼。

難點突破

對于我而言，用threejs繪制地球可能會是難點，threejs沒有用過，而且印象中對3D的東西，一直比較敬畏。如果3D的地球弄不出來，這個項目其他的都做完了，在浩瀚的宇宙中是怎麼也找不到“聲音來自何方”了。

OK，來看threejs怎麼能弄出個地球來。（這個階段并沒有開始項目代碼，而是盡量的在一個臨時檔案中進行塗鴉，快速随意的達到繪制出地球的目的就行了）

官網

對于新的技術，首先得看官網。這裡并不是來全面學習threejs的，而是抱着很強的目的性去實作特定功能，是以直接去示例中找，是否有類似實作可以借鑒。在官網首頁中，通過縮略圖，找到了下面三個關于地球的例子。

可惜，貌似這裡的例子都是一些産品應用，代碼都是壓縮過的。于是開始去尋找官方示例，最後在examples裡找到了canvas_geometry_earth，最棒的是在github上有源碼。

示例代碼

clone下threejs的項目代碼，找到上面的示例檔案。示例代碼不到200行，閱讀之後發現其實threejs和之前接觸過的一些2D的遊戲引擎（createjs，pixijs）等比較類似，都需要有場景（scene），要有渲染循環（render loop），在scene上添加對象（Mesh）或者是group；而Mesh由形狀（Geometry）和材質（Material）組成，Material則又是由圖檔建立的紋理（Texture）而來。不同的是，這裡有相機（Camera），有光線（Light），還有一些一直都不明白的距離機關問題。

稍微改動一下示例代碼，就能建立出來了earth。但是從使用的資源來看，隻有一個地表紋理貼圖（earth4.jpg），而xplan中還有3個關于earth的圖檔檔案：

不确定bump和spec是什麼，我的思路是先在官方文檔中找這些關鍵詞，如果找不到，就加上threejs一起去做google。官網上找到了bump相關的東西，但幫助最大的是google出來的一篇詳細的如何使用threejs建立earth的教程。（如果這個教程早點冒出來，也省了前面改示例代碼的時間了。主要也源于對threejs不熟悉，沒有想到哪些示例可能已經有很多教程了）

換上了earth4.jpg貼圖之後：

earth_bump

了解到bumpmap：

Bump mapping is a technique to simulate bumps and wrinkles on the surface of an object. The result is an apparently bumpy surface rather than a smooth surface although the surface of the underlying object is not actually changed. I\'m sorry, you can\'t tilt the camera to see 3D mountains with this technique. You can adjust the bump effect (how much the map affects lighting) with the bumpScaleparameter

threejs中bumpmap是調節對光線的感覺，來使人能明顯感覺到不光滑的表面，而并沒有在mesh中添加起伏，即沒有真的改變形狀。

官方bumpmap示例效果圖如下：

其實這裡的earth_bump.jpg就是一個DEM，在threejs中稱作bumpmap，在其他一些地方也有被叫做heightmap。即用灰階圖表達高程，越黑表示高程越低，越亮表示高程越高。GIS專業中常用，unity3D中建立地形也會用到這個。

添加了earth_bump之後：

earth_spec

了解到了earth_spec.jpg是specular map，用來調節鏡面反射的，這裡主要是調節海洋對光線的反射，增加真實性。

添加了earth_spec之後：

漂移的雲層

雲層的添加，前面的教程裡已經很詳細了，其實就是一個同心，半徑大一點的球體而已。

添加了雲層之後：

浮動的标簽

xplan中地球表面有城市标簽，會随着地球的自轉而移動，同時又保持了水準的方向。google關鍵詞：threejs floating label。于是找到：

http://threejs.org/examples/#...
http://stemkoski.github.io/Th...

找到方向就好辦，稍微參考一下官方API文檔和找到的示例代碼，能夠很容易的在earth上添加上浮動标簽。

小結

到這裡，3D地球的繪制基本差不多了。雖然threejs是新東西，但是絕大部分功能都容易找到方向，并且改動一下示例代碼都夠快速的實作我們想要的效果，所這個過程并不難。重點是如何在一個未知的領域内找到想要的東西，并且快速的為自己所用。

但過程中我碰到一個性能問題，耽誤了很久。xplan的頁面在chrome的PC和手機模式都有近60的FPS，但是我建立的earth在PC有60，但是在手機模式卻不到30！最後逐一調試代碼，修改參數，花了好久才找到原因：

renderer.setPixelRatio(window.devicePixelRatio)

threejs的示例代碼中都有這麼一行，就是這一行導緻了我的代碼比xplan的代碼在手機上繪制的像素點翻倍，進而導緻了性能成倍的下降。

另外，前面也提到，我對于3D架構中的距離機關和坐标問題，很模糊。于是這裡，關于earth的大小，camera朝向，每個城市标簽的三維坐标和其他關與三維坐标的問題，我都硬抄了xplan的參數（幸好他們的代碼沒有壓縮...）。還有一個要承認的，就是地球後面的淡藍色光暈效果，貌似用了一些進階的渲染技術，我也就硬搬了xplan這部分代碼。