摘要：首先是這個(gè)地球，得看看它是真還是假因?yàn)楹芏嘈Ч悄醚┍虉D做的，比如這里的旋轉(zhuǎn)的飛機(jī)，結(jié)果找到了并且在網(wǎng)站文件中搜到了，那就是沒跑了。

上個(gè)月底，在朋友圈看到一個(gè)號(hào)稱“這可能是地球上最美的h5”的分享，點(diǎn)進(jìn)入后發(fā)現(xiàn)這個(gè)h5還很別致，思考了一會(huì)，決定要不高仿一個(gè)?

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

線上地址

github地址

除了手機(jī)端的media控制沒有去兼容，其他的基本都給仿了。 那為了讓你覺得是高仿，最好使用chrome的手機(jī)調(diào)試模式進(jìn)行訪問。微信打開將聽不見聲音看不到視頻... （后面再有時(shí)間看是不是仿的再進(jìn)一步）

之所以要仿它，因?yàn)橛X得這個(gè)h5還挺酷，想看看自己需要花多長時(shí)間找到并實(shí)現(xiàn)它的技術(shù)路徑。

這個(gè)h5的主要玩法很簡單：地球自轉(zhuǎn)的時(shí)候會(huì)播放背景音樂（比如海浪聲），為了找到這個(gè)聲音是從哪個(gè)地球上哪個(gè)地方傳來的，需要長按下方的按鈕，這時(shí)地球會(huì)自動(dòng)轉(zhuǎn)動(dòng)到目標(biāo)地點(diǎn)，然后鏡頭拉近，穿過云層，最后你會(huì)看到和這段聲音相關(guān)的視頻內(nèi)容；松開手之后，上面的過程會(huì)倒退回去，地球又開始自轉(zhuǎn)，播放著下段神秘的背景音樂。

個(gè)人覺得這個(gè)設(shè)計(jì)還是很新穎的，不是說用了3D的效果，而是將一個(gè)看起來很復(fù)雜的動(dòng)畫（從宇宙拉近到地表的過程），使用最基礎(chǔ)的3D效果和其他一些常規(guī)的動(dòng)畫手法去實(shí)現(xiàn)，并且能流暢的運(yùn)行在手機(jī)瀏覽器上。另外還有聲音和視頻的完美搭配，用戶體驗(yàn)不錯(cuò)。

反復(fù)觀察，理清頁面功能：

加載：加載進(jìn)度百分比，饒橢圓軌道運(yùn)行的小行星作為loading動(dòng)畫（這個(gè)動(dòng)畫我沒有做）

地球：3D球體，旋轉(zhuǎn)入場動(dòng)畫，自轉(zhuǎn)，漂移的云層，城市的坐標(biāo)點(diǎn)，鏡頭的旋轉(zhuǎn)與拉近，穿越云層動(dòng)畫

星空背景：靜態(tài)星空背景圖，動(dòng)態(tài)（閃爍的）星星，劃過的流星

隱藏的音頻和視頻：按內(nèi)容（地理位置）劃分的音頻和視頻內(nèi)容

其他：操作指引示意動(dòng)畫，地球上方會(huì)顯示當(dāng)前城市的經(jīng)緯度，“了解更多”的結(jié)語頁面等

打開chrome inspect一下。

首先是這個(gè)地球，得看看它是真3D還是假3D（因?yàn)楹芏?D效果是拿雪碧圖做的，比如這里的旋轉(zhuǎn)的3D飛機(jī)），結(jié)果找到了：

并且在網(wǎng)站source文件中搜到了THREE，那就是threejs沒跑了。

然后是那個(gè)穿越云層的效果，猜測(cè)可能是GIF，可能是SpriteSheet Animation，也有可能是一段視頻。但是考慮到這個(gè)穿越的動(dòng)畫可以正反雙方播放，那么就很可能是是SpriteSheet Animation了，否則GIF或者視頻文件需要兩個(gè)動(dòng)畫方向各準(zhǔn)備一份。這個(gè)從chrome debug工具的network下找到了證據(jù)—— 頁面下載了一系列名為kf_cloud_0000X.jpg的圖片文件。順手就把它們down下來，備用。

再就是背景音樂和隱藏視頻的問題，同樣在network下，找到了兩個(gè)文件，一個(gè)mp3一個(gè)mp4，每個(gè)文件都包含了所有片段，就像是media的雪碧圖，只在需要的時(shí)候控制播放對(duì)應(yīng)片段而已。

其他的內(nèi)容都沒什么問題，CSS動(dòng)畫或者CANVAS都好做。那么到此，技術(shù)路徑都清楚了，準(zhǔn)備開始寫代碼。

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

OK，來看threejs怎么能弄出個(gè)地球來。（這個(gè)階段并沒有開始項(xiàng)目代碼，而是盡量的在一個(gè)臨時(shí)文件中進(jìn)行涂鴉，快速隨意的達(dá)到繪制出地球的目的就行了）

對(duì)于新的技術(shù)，首先得看官網(wǎng)。這里并不是來全面學(xué)習(xí)threejs的，而是抱著很強(qiáng)的目的性去實(shí)現(xiàn)特定功能，因此直接去示例中找，是否有類似實(shí)現(xiàn)可以借鑒。在官網(wǎng)首頁中，通過縮略圖，找到了下面三個(gè)關(guān)于地球的例子。

可惜，貌似這里的例子都是一些產(chǎn)品應(yīng)用，代碼都是壓縮過的。于是開始去尋找官方示例，最后在examples里找到了canvas_geometry_earth，最棒的是在github上有源碼。

clone下threejs的項(xiàng)目代碼，找到上面的示例文件。示例代碼不到200行，閱讀之后發(fā)現(xiàn)其實(shí)threejs和之前接觸過的一些2D的游戲引擎（createjs，pixijs）等比較類似，都需要有場景（scene），要有渲染循環(huán)（render loop），在scene上添加對(duì)象（Mesh）或者是group；而Mesh由形狀（Geometry）和材質(zhì)（Material）組成，Material則又是由圖片創(chuàng)建的紋理（Texture）而來。不同的是，這里有相機(jī)（Camera），有光線（Light），還有一些一直都不明白的距離單位問題。

稍微改動(dòng)一下示例代碼，就能創(chuàng)建出來了earth。但是從使用的資源來看，只有一個(gè)地表紋理貼圖（earth4.jpg），而xplan中還有3個(gè)關(guān)于earth的圖片文件：

不確定bump和spec是什么，我的思路是先在官方文檔中找這些關(guān)鍵詞，如果找不到，就加上threejs一起去做google。官網(wǎng)上找到了bump相關(guān)的東西，但幫助最大的是google出來的一篇詳細(xì)的如何使用threejs創(chuàng)建earth的教程。（如果這個(gè)教程早點(diǎn)冒出來，也省了前面改示例代碼的時(shí)間了。主要也源于對(duì)threejs不熟悉，沒有想到哪些示例可能已經(jīng)有很多教程了）

換上了earth4.jpg貼圖之后：

教程中的步驟不再這里重復(fù)，下面僅僅對(duì)一些關(guān)鍵東西作簡單的解釋。

了解到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是調(diào)節(jié)對(duì)光線的感知，來使人能明顯感覺到不光滑的表面，而并沒有在mesh中添加起伏，即沒有真的改變形狀。

官方bumpmap示例效果圖如下：

其實(shí)這里的earth_bump.jpg就是一個(gè)DEM，在threejs中稱作bumpmap，在其他一些地方也有被叫做heightmap。即用灰度圖表達(dá)高程，越黑表示高程越低，越亮表示高程越高。GIS專業(yè)中常用，unity3D中創(chuàng)建地形也會(huì)用到這個(gè)。

添加了earth_bump之后：

了解到了earth_spec.jpg是specular map，用來調(diào)節(jié)鏡面反射的，這里主要是調(diào)節(jié)海洋對(duì)光線的反射，增加真實(shí)性。

添加了earth_spec之后：

云層的添加， 前面的教程里已經(jīng)很詳細(xì)了，其實(shí)就是一個(gè)同心，半徑大一點(diǎn)的球體而已。

添加了云層之后：

xplan中地球表面有城市標(biāo)簽，會(huì)隨著地球的自轉(zhuǎn)而移動(dòng)，同時(shí)又保持了水平的方向。google關(guān)鍵詞：threejs floating label。于是找到：

http://threejs.org/examples/#...

http://stemkoski.github.io/Th...

找到方向就好辦，稍微參考一下官方API文檔和找到的示例代碼，能夠很容易的在earth上添加上浮動(dòng)標(biāo)簽。

到這里，3D地球的繪制基本差不多了。雖然threejs是新東西，但是絕大部分功能都容易找到方向，并且改動(dòng)一下示例代碼都?jí)蚩焖俚膶?shí)現(xiàn)我們想要的效果，所這個(gè)過程并不難。重點(diǎn)是如何在一個(gè)未知的領(lǐng)域內(nèi)找到想要的東西，并且快速的為自己所用。

但過程中我碰到一個(gè)性能問題，耽誤了很久。xplan的頁面在chrome的PC和手機(jī)模式都有近60的FPS，但是我創(chuàng)建的earth在PC有60，但是在手機(jī)模式卻不到30！最后逐一調(diào)試代碼，修改參數(shù)，花了好久才找到原因：

renderer.setPixelRatio(window.devicePixelRatio)

threejs的示例代碼中都有這么一行，就是這一行導(dǎo)致了我的代碼比xplan的代碼在手機(jī)上繪制的像素點(diǎn)翻倍，從而導(dǎo)致了性能成倍的下降。

另外，前面也提到，我對(duì)于3D框架中的距離單位和坐標(biāo)問題，很模糊。于是這里，關(guān)于earth的大小，camera朝向，每個(gè)城市標(biāo)簽的三維坐標(biāo)和其他關(guān)與三維坐標(biāo)的問題，我都硬抄了xplan的參數(shù)（幸好他們的代碼沒有壓縮...）。還有一個(gè)要承認(rèn)的，就是地球后面的淡藍(lán)色光暈效果，貌似用了一些高級(jí)的渲染技術(shù)，我也就硬搬了xplan這部分代碼。

下一篇將介紹如何制作多步驟、可進(jìn)可退的動(dòng)畫，在我看來這個(gè)才是技術(shù)難點(diǎn)。