H5打造3d場景不徹底攻略（一）: H5 3d表現形式

前言

日前，taobao造物節H5放肆地火了一把。相信接下來將3d嵌入網站的這種營銷方式會被愈來愈多的人留意到。
工做之餘體驗了若干個3d H5頁面，感受這類的H5互動體驗性明顯要比普通的要強，把二維的物體轉化成三維，能給人一種置身其中的感受。因此，一個好的idea加上低成本的技術實現——將3d融入H5從此也許還會爆發出更大的能量。

3D在H5中的表現形式

話很少說，直接貼幾個連接你們體驗一下。

全景

一、場景全景
這裏選了三個比較有表明性的全景H5。

淘寶造物節

做爲近來最HIT的一個H5，其實從技術上來不難實現，最大的賣點就是創意了。進場動畫是一連串的背景畫布旋轉變換迅速飄入視線，試感覺下就能體會到這是很棒的視覺盛宴。固然也跟精緻的插畫設計分不開。

---

QQ物聯星球計劃

全景技術是基於Three.js，建立天空盒子並進行貼圖實現的，但因爲內容比較少，而且對代碼進行了壓縮，因此體驗起來仍是很流暢的。因爲背景使用了星空圖，因此從視覺上來講圖與圖之間擁有較高的貼合度。

---

微物質

因爲歷時比較長，這裏就不放動圖了，你們本身去網址體驗一下吧。

做爲一個敘事性的H5，它的場景和動效所有基於代碼實現，而拋棄了視頻這種方式。這給移動端用戶帶來了加載性能上的顯著提高。但它與用戶的交互比較少，於是並不能直觀體現出這是徹底基於代碼實現的。而且節奏平緩，沒什麼波瀾，配樂略顯哀沉，讓人很難徹底體驗完這個長達5分鐘的H5。還不如看一個有趣的視頻。若是能將它融入更多的交互和起伏有序的情節必定能給這個H5增色不少。

二、物品全景
這個比較好理解，就是咱們能夠經過手勢觸摸物品，觀看到物品各個面的樣式。可是這種應用場景較爲侷限，通常爲某個特定品牌物體展現時才比較適合。
效果可在本文最後的「勝勢全開」例子中體驗。

視差

比較常見的是頁面滾動時的視差。然而使用3D變換中的rotate和translate屬性實現的視差，能更大化地體現出3D效果。實現起來是很是簡單的，只要將圖片中小元素分離出來，而後讓他們以不一樣的值旋轉移動（注意值不能相差太大，有細微飄動的感受就能夠了）從視覺上便能感受這些小元素是層疊在一塊兒，動態模擬出不一樣視角的顯示效果不一樣。

看一個例子

Apple TV海報背景視覺差特效

3D變換

勝勢全開

這個H5也是隻作造物節那個團隊作的，技術選型依然是js+css3d，一樣是使用了他們團隊封裝的css-engin這個輕量級類庫。這是他們較爲早期的做品。不難發現，這個團隊對css3d的運用很是的純屬。
從這個H5來講，剛進入畫面就有物體衝入視線的感受，而且不斷地運用360°旋轉和鏡頭的拉伸縮放感對視覺形成衝擊。很好地爲咱們詮釋了，以css3 3d變換打造H5 3d亦不是爲一種明智的低成本的實現方式。

H5中3d的表現形式就先談到這裏了，接下來我會從技術實現的角度聊聊這些有趣的H5究竟是怎麼實現的。