QQX計劃推廣H5——這可能是地球上最美的H5，是怎麼做出來的？

01-14

這可能是地球上最美的h5 就是這種，題主昨晚無意看到後就一直很好奇這種怎麼做出來的？需要哪方面技術支持？要用多久時間？資金預算多少？求教~

——————端午節更新————————

原作者已經粗線了，大家快去圍觀他，別聽我胡說啦~（逃）

QQX計劃推廣H5--這可能是地球上最美的H5，是怎麼做出來的？ - 知乎

——————端午節更新————————

光看效果，如果讓我來做：

1. body背景用漸變

2. 背景上搞個演算法隨機丟星星上去

3. 搞個演算法隨機丟彗星上去，

4. 利用threejs丟個球形上去，給個地球貼圖的材質，這個很容易找到，再給球體外面套一個半徑更大的球體，弄成透明的再丟上大氣層的貼圖。

5. 每1/60秒轉動一下地球，以及監聽滑鼠事件以及觸屏事件，隨著拖動轉動地球

6. 搞點不同的白噪音，比如大海的，海鷗的，下雨的，風的等等，然後根據地球轉動的角度把聲音組合在一起同時播放。

7. 最後找個大V發出去

其實不難，主要是要找個好美工，然後搞懂threejs，知道怎麼播放聲音，了解js的事件監聽，差不多了吧~

http://www.tansuyun.cn

給 @沈毅大師打打廣告：

PC 端類似的效果現在可以輕鬆用 ECharts 二次開發了。

ECharts Gallery

這個用項目都說很簡單，我只能說，會者不難，難者不會。

這個項目的執行者是我，我簡單來說下樓主關注的問題吧：

1、技術：threejs 以及簡單的glsl了解。
2、周期：從提案到開發完成大概一個月左右的時間，有設計開發並行時間（其中開發三周，兩周寫功能，一周給產品爸爸修改。）。

一、關於怎麼實現這個地球（星空以及流星實現就不描述了）：

1、地球：

（1）用threejs繪製一個球體，地球的材質選用馮氏（MeshPhongMaterial）因為想創建一個明亮的球體，然後對關照也會有反應，所以選擇這種材質。

（2）然後找一個地球的貼圖貼上即可（這個地球的貼圖顏色方面設計有優化過）

2、凹凸感：

利用bumpMap貼圖以及specularMap貼圖來完成。（需要有光照，不然顯示不出凹凸感）

3、雲層：

利用一張雲層的png的圖來完成（也可以用jpg，不過jpg得對雲層進行處理）這裡做了兩層雲來彌補雲層稀疏的缺陷。

為了讓雲層和地球能有個區分，將雲層的球體大小設置比地球大1號，不然雲層會貼上去。沒有層次感。

4、燈光：

（1）環境光

（2）聚光燈光（類似手電筒的光，因為只需要照亮地球的某一部分）

tips：這個燈光的感覺完全得靠設計師和開發一起調整了。（推薦gui這個庫，調試起立會比較方便）

5、大氣層：

首先想到了用一張png的圖去做，然而做出來的效果實在是差，所以就飛了。

然後考慮用shader區寫一個（threejs支持自定義的shader），同樣創建兩個球體，一個黑色的球體，一個用材質用shader寫的（為了有大氣層的效果，這個球體基於原本的球體進行放大一點）。具體的代碼就不再這個演示了。

大致這樣地球就實現出來了。其中的雲層的動畫，地球的轉動、燈光的顏色、地球的反射強度、大氣層的強弱顏色，等等、這些都需要和設計一起花時間進行調試。

二、點位置的判斷和音頻的切換。

1、點位置的判斷

剛開始的做法：在地球上劃分五等分的區域，然後通過射線檢測來判斷點處於哪個區域來實現區域的劃分。（剛開是因為沒有點出現在南北極，所以體驗上還好，後來產品爸爸說點會出現在南北極，然後這種劃分辦法在切換相機移動的時候就感覺很奇怪）

改進做法：反正五個點是固定的，所以通過判斷兩點距離哪個離的近相機就去哪個地方。這裡的兩個點是用射線檢測與地球相交的點與五個點分別判斷得到最近的距離。

2、音頻的切換

為了載入所以將5段音頻sprite，因為判斷出了在離哪個點近，得到那個點的索引值，播放對應的音頻就可以了。（視頻亦是如此）

三、我覺得還可以進行優化：

1、地球在手指滑動end之後，可以緩動停止。

2、星空可以考慮做在3d層里，這樣在地球剛開始出來的那一瞬間，會感覺整個星空都是轉動的。

3、點位置的設定，因為現在只有5個點，假如產品爸爸說要再加5個點，這5個點的坐標設置會變的很蛋疼，我的想法是可不可以在二維的貼圖上描繪出這個點，然後在通過一段轉換代碼，將這個點轉換到3d地球上去（一勞永逸）。

4、從地球切換到視頻那一塊的動畫，可以考慮用不同的動畫描述，而不是單一的雲層。

5、實時的經緯度切換。（現在地球上顯示的經緯度是固定的，能實現實時切換可能會帥一點）

雖然說這個項目並不是那麼高大上，但我覺得我已經邁進了webgl的世界了。

附上地球源碼供參考：flowers1225/threejs-earth

我只知道這裡用到了Canvas技術：

對於懂得人來說很快，對於不懂的人來說估計很難整得出來。這種動效效果，每一位同學來開發的成本都是不一樣的，主要是看你自己的技術棧是不是符合，如果不符合，結果你也是知道的。

另外知道案例的地址，自己分析一下別人的代碼，大概也知道自己能不能開發出來，需要多少時間，根據自己開發的時間你也可以算出開發成本與費用。

基於WebGL技術的國外這種網站可是一大把咯，還不如看看這個吧：Earth 2050

webgl

基於three.js 庫,渲染了一個圓球,用了漫反射貼圖,鏡面反射貼圖,凹凸貼圖,讓地球有高低感.

要想做的好,需要充足的3D編程和3D美術經驗

時間,會的人,工時不會要很多,問題是有經驗的人是很少.

資金預算?不好說,現在會這個的人不多,尤其少美術(我很傷)

我見過最美還數去年雙十一的貓

剛寫完作業然後嘗試弄了個。鏈接在這：這可能是地球上第二美的h5，github repo 在這：yuanqili/earth3d。（剛才更新了個高清貼圖的這可能是地球上第二美的h5，可能需要載入很久）。在我的 safari (macOS) 上跑是沒問題的。剛才在手機上跑了下也可以，但是只能在電腦上拖動轉動，手機上拉不動。另外在 windows 上試了下沒法播放。

熟手把這些亂七八糟的細節全加上，也就一個下午吧。資金可能就是一個盒飯？

非常卡（我猜主要來自於texture的載入），也沒有兼容性，因為我不會優化和兼容。我只有一點點 html css 和 js 的經驗，也沒用過 three.js。我寫這個只是想說一下它不難，我從零起步大概花了兩三個小時。當然我覺得評論里的批評也很對，很多細節會更花時間。更關鍵的應該是構思和素材。組裝和實現只不過是苦力活兒罷了。

作為前端彩筆的我，當初看的這個H5同樣也被折服了。所有一看到這個話題，我就屁顛屁顛的跑了進來。

同答主一樣，熱（因）愛（為）學（窮）習的我，也渴望一探其中的門檻。

對此感謝 @阿舟丶大神的回答，再次獻上膝蓋。

但是隨著我繼續往下翻，發現一些有趣的現象。一些人秀優越，說這個很東西很簡單幾下就做出來。然後不是曬自己寫demo，就是掛了國外的好看的框架。

結果用手機打開效果平淡的狠，額！你交這樣的東西，產品哥哥絕對會找探討人生的。而動不動掛國內別人的效果的時候，讓我想起以前剛剛學前端詢問別人某個動畫效果實現原理，然後有人直接把jq插件網站的給掛上來。

對於這樣的人，我。。。。。

最後一句，回答技術問題都能不能好好回答，好好看看題主的問題再說好吧。好好說話，比如像

@大漠大神那樣回答，就非常棒棒的。

再次給大神們獻上膝蓋

原來有人提這個問題，我想我的回答應該會算對口吧。

我當初看到這個H5後，就做了一個基本一模一樣的（素材盜來的）。

這裡是demo

這裡是代碼

這裡是文章上和文章下

貼個圖吧

時間上，第一次用three.js（也因為如此，地球上藍色光環部分的「高級渲染」代碼是copy來的...），然後coding過程中順便還要寫些文章草稿，大概完成下來2到3周時間。

我想說的是：山寨它，不難；但是它作為一個產品被設計出來，還是可圈可點的。

請不要侮辱我智商，馬里亞納海溝是這樣的潛水聖地嗎

webgl 實現的，和前端關係不大

需要了解 js,glsl 著色語言，圖形學相關原理

有興趣的可以從下面這個網址學習下 webgl WebGL Fundamentals

three.js 入門還是可以的，但不推薦

webgl、canvas、數據可視化等，這些我都不懂……

不過我在美團的基友是這方面的專家，阿里 P7級別的，有興趣可以私信我加他的微信。

以後那些天天寫遊戲和引擎的苦逼圖形程序員可能要轉前端了。

看到很多評論覺得簡單，國外比這個漂亮的大把是，有什麼了不起的呢。

簡單了解過webgl，科普下，PC上牛逼的webgl除了代碼牛逼，最重要的原因是chrome支持WebGL 2.0(OpenGL ES 3.0.)，而手機目前只支持WebGL1.0(OpenGL ES 2.0.)，引用：Can I use... Support tables for HTML5, CSS3, etc，中間的差別可以百度谷歌。

更牛逼的效果不一定是作者代碼寫不出，也要考慮兼容性（聽說兼容也不好做）。

在現在H5近乎都是視頻視頻視頻的情況下，能有這樣的嘗試，並且能轉化成相對成功的商業案例，對於我們從業者來說是值得鼓勵的。

不說了，回去擼一發視頻H5壓壓驚～

從技術角度分析，原項目基於WebGL，依賴Three.js。

3D地球實現思路:

地球使用了高度，漫反射，高光三種貼圖
雲層使用透明材質
大氣層的反射，使用了自定義shaderMaterial繪製。

我自己順手用 shawn0326/zen-3d 實現了一個，地址：zen-3d-examples

shawn0326/zen-3d 這裡有源碼，也就100行左右吧，做技術的可以直接參考，就不解釋了。

具體到你的問題，最大的難點不在技術，而在設計（設計成本也是最高的）。大廠做這種東西預算不低，凡是高質量有創意的成品，都隱含了很大試錯的成本，外包的話花幾十萬（甚至上百w，像阿里造物節那種）輕輕鬆鬆。當然如果你有自己的技術與設計能搞定就更划算啦。

我不太了解是怎麼做的。我只是參與了這個活動，我覺得18歲的姑娘也能夠是暖男，我想去納米比亞。參賽的小視頻https://kandian.qq.com/mqq/activity/html/personvideo.html?vid=p1418lijkkxusr=Mzg2MDg2NTE1_wv=3_bid=2464x5PreFetch=1

這是我寫的遊戲網頁鏈接

遊戲名字叫重返地球，通過鍵盤q e和上下左右可以操作飛船，也是個太空的，雖然沒有你說的那麼漂亮，但是我當時寫是奔著功能去的，加各種美的效果也不是不會，人家three.js都提供了教程。

我在另一個的答案在學習C++基礎知識之後，應該學習什麼以達到能編寫小遊戲的水平？ - 知乎

用個插件配置幾個欄位就差不多了

似乎看不出什麼高大上的東西。

設計小哥出個3dmax（不用那麼麻煩都可以，直接Google找一張全球地圖，寫個球體直接貼圖就ok，不過看到這個h5有大氣層，這樣就不是一張靜態圖的事兒啦），轉一下json格式，threejs渲染，事件綁定，音樂視頻的載入。

threejs官網比這6得一逼的一大堆。