提示:

演講

前端大型免費(fèi)公開課講座

課程

零基礎(chǔ)學(xué)習(xí)的前端教程都在這里~

上個(gè)月底在朋友圈看到一個(gè)分享，說“這可能是地球上最美的h5了?！秉c(diǎn)開后發(fā)現(xiàn)這個(gè)h5還是很獨(dú)特的。想了一會(huì)兒，我決定不模仿一個(gè)。

到現(xiàn)在，高仿已經(jīng)基本完成。

線上地址github地址

除了手機(jī)上的媒體控制不兼容，其他基本都是模仿。那么，為了讓你有高度被模仿的感覺，最好用chrome的手機(jī)調(diào)試模式來訪問。微信打開后，你聽不到聲音，也看不到視頻...(后面還有時(shí)間看是不是模仿。)

我想模仿一下，因?yàn)槲矣X得這個(gè)h5挺酷的，我想看看我需要多久才能找到并實(shí)現(xiàn)它的技術(shù)路徑。

需求分析

這個(gè)h5的主要玩法很簡(jiǎn)單:地球自轉(zhuǎn)時(shí)會(huì)播放背景音樂(比如海浪聲)。為了找出這個(gè)聲音來自地球上的哪個(gè)地方，你需要長(zhǎng)時(shí)間按下按鈕，然后地球就會(huì)自動(dòng)旋轉(zhuǎn)到目標(biāo)位置。然后鏡頭拉近，穿過云層，最后你會(huì)看到與這個(gè)聲音相關(guān)的視頻內(nèi)容；松開手后，上面的過程會(huì)倒退，地球又開始轉(zhuǎn)動(dòng)，播放下一段神秘的背景音樂。

個(gè)人覺得這個(gè)設(shè)計(jì)還是很新穎的，不是說用3D效果，而是用最基本的3D效果和其他常規(guī)動(dòng)畫技術(shù)實(shí)現(xiàn)一個(gè)看似復(fù)雜的動(dòng)畫(把宇宙畫得更接近表面的過程)，可以在移動(dòng)瀏覽器上流暢運(yùn)行。另外，聲音和視頻完美搭配，用戶體驗(yàn)不錯(cuò)。

我不確定什么是撞擊和規(guī)格。我的想法是先在公文里找到這些關(guān)鍵詞。如果我找不到他們，我會(huì)在谷歌上添加三個(gè)。凹凸相關(guān)的東西在官網(wǎng)上可以找到，但是最有幫助的是一個(gè)關(guān)于如何使用threejs創(chuàng)建地球的詳細(xì)教程。(如果這個(gè)教程早點(diǎn)出來的話，會(huì)節(jié)省修改樣例代碼的時(shí)間。主要是不熟悉3p，沒想到哪個(gè)例子可能已經(jīng)有很多教程了)

更改earth4.jpg地圖后:

教程中的步驟這里就不贅述了，下面只簡(jiǎn)單說明一些關(guān)鍵的東西。

地球凹凸

了解bumpmap:

凹凸貼圖是一種模擬物體表面凹凸和皺紋的技術(shù)。結(jié)果是一個(gè)明顯凹凸不平的表面，而不是一個(gè)光滑的表面，盡管底層物體的表面實(shí)際上沒有改變。對(duì)不起，你不能用這種技術(shù)傾斜相機(jī)看3D山。您可以使用凹凸貼圖參數(shù)來調(diào)整凹凸效果(貼圖對(duì)照明的影響程度)

through js中的Bumpmap調(diào)整光的感知，使人明顯感覺到表面的不光滑，但并沒有給網(wǎng)格增加起伏，也就是并沒有真正改變形狀。

官方bumpmap示例渲染如下:

其實(shí)這里的earth_bump.jpg是一個(gè)DEM，在threejs和heightmap其他地方都叫bumpmap。也就是說高程用灰度表示，越暗越低，越亮越高。常用于GIS專業(yè)，這也用于unity3D中的地形創(chuàng)建。

增加了地球凹凸:

地球_規(guī)格

要明白earth_spec.jpg是一個(gè)鏡面貼圖，用來調(diào)整鏡面反射。這里，它主要調(diào)整海洋對(duì)光的反射，增加真實(shí)性。

添加earth_spec后:

浮云

云的添加在前面的教程中已經(jīng)詳細(xì)介紹過了，它實(shí)際上是一個(gè)半徑更大的同心球體。

添加云后:

浮動(dòng)標(biāo)簽

在xplan中，地球表面有一個(gè)城市標(biāo)簽，會(huì)隨著地球的自轉(zhuǎn)而移動(dòng)，同時(shí)保持水平方向。Google關(guān)鍵詞:threejs浮動(dòng)標(biāo)簽。所以我發(fā)現(xiàn):

http://threejs.org/examples/#webgl_spriteshttp://stemkoski.github.io/Three.js/Labeled-Geometry.html

很容易找到方向。稍微參考一下官方API文檔和找到的示例代碼，就可以輕松地在地球上添加浮動(dòng)標(biāo)簽。

摘要

在這一點(diǎn)上，3D地球的繪制幾乎是一樣的。雖然threejs是個(gè)新事物，但是大部分函數(shù)都很容易找到方向，改變樣例代碼可以很快達(dá)到想要的效果，所以這個(gè)過程并不難。關(guān)鍵是如何在一個(gè)未知的領(lǐng)域找到自己想要的東西，并快速的為自己所用。

但是我在過程中遇到了性能問題，造成了長(zhǎng)時(shí)間的延遲。Xplan頁(yè)面在chrome PC和手機(jī)模式下有近60 fps，而我創(chuàng)建的地球在PC模式下有60 FPS，而在手機(jī)模式下不到30 fps！最后，逐一調(diào)試代碼和修改參數(shù)花了很長(zhǎng)時(shí)間才找到原因:

renderer.setPixelRatio(window.devicePixelRatio)

triple js的樣例代碼中有這樣一行，導(dǎo)致我的代碼比xplan代碼在手機(jī)上畫的像素點(diǎn)多了一倍，從而導(dǎo)致性能呈指數(shù)級(jí)下降。

另外，前面說過，對(duì)于3D框架中的距離單位和坐標(biāo)，我是非常模糊的。所以在這里，關(guān)于地球的大小，相機(jī)的朝向，每個(gè)城市標(biāo)簽的3D坐標(biāo)等與3D坐標(biāo)相關(guān)的問題，我硬拷貝了xplan的參數(shù)(還好他們的代碼沒有壓縮...).還有一點(diǎn)需要承認(rèn)，那就是地球背后的淺藍(lán)色光暈效果，好像用了一些高級(jí)的渲染技術(shù)，所以我把這部分xplan代碼硬移動(dòng)了。

出發(fā)地:segmentfault.com/a/1190000013191860

聲明:文章版權(quán)歸作者所有。如有侵權(quán)，請(qǐng)聯(lián)系邊肖刪除。