threejs建立地球

上個月底，在朋友圈看到一個號稱「這多是地球上最美的h5」的分享，點進入後發現這個h5還很別緻，思考了一會，決定要不高仿一個?css

到今天爲止，高仿基本完成，html

線上地址git
github地址github

除了手機端的media控制沒有去兼容，其餘的基本都給仿了。那爲了讓你以爲是高仿，最好使用chrome的手機調試模式進行訪問。微信打開將聽不見聲音看不到視頻... （後面再有時間看是否是仿的再進一步）web

之因此要仿它，由於以爲這個h5還挺酷，想看看本身須要花多長時間找到並實現它的技術路徑。chrome

需求分析

這個h5的主要玩法很簡單：地球自轉的時候會播放背景音樂（好比海浪聲），爲了找到這個聲音是從哪一個地球上哪一個地方傳來的，須要長按下方的按鈕，這時地球會自動轉動到目標地點，而後鏡頭拉近，穿過雲層，最後你會看到和這段聲音相關的視頻內容；鬆開手以後，上面的過程會倒退回去，地球又開始自轉，播放着下段神祕的背景音樂。canvas

我的以爲這個設計仍是很新穎的，不是說用了3D的效果，而是將一個看起來很複雜的動畫（從宇宙拉近到地表的過程），使用最基礎的3D效果和其餘一些常規的動畫手法去實現，而且能流暢的運行在手機瀏覽器上。另外還有聲音和視頻的完美搭配，用戶體驗不錯。

瀏覽器

反覆觀察，理清頁面功能：微信

加載：加載進度百分比，饒橢圓軌道運行的小行星做爲loading動畫（這個動畫我沒有作）app
地球：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。因而找到：

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

小結

到這裏，3D地球的繪製基本差很少了。雖然threejs是新東西，可是絕大部分功能都容易找到方向，而且改動一下示例代碼都夠快速的實現咱們想要的效果，所這個過程並不難。重點是如何在一個未知的領域內找到想要的東西，而且快速的爲本身所用。

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

renderer.setPixelRatio(window.devicePixelRatio)

threejs的示例代碼中都有這麼一行，就是這一行致使了個人代碼比xplan的代碼在手機上繪製的像素點翻倍，從而致使了性能成倍的降低。

另外，前面也提到，我對於3D框架中的距離單位和座標問題，很模糊。因而這裏，關於earth的大小，camera朝向，每一個城市標籤的三維座標和其餘關與三維座標的問題，我都硬抄了xplan的參數（幸虧他們的代碼沒有壓縮...）。還有一個要認可的，就是地球后面的淡藍色光暈效果，貌似用了一些高級的渲染技術，我也就硬搬了xplan這部分代碼。