前言
日前，taobao造物節H5放肆地火了一把。相信接下來將3d嵌入網站的這種營銷方式會被越來越多的人留意到。
工作之余體驗了若干個3d H5頁面，感覺這類的H5互動體驗性明顯要比普通的要強，把二維的物體轉化成三維，能給人一種置身其中的感覺。所以，一個好的idea加上低成本的技術實現——將3d融入H5今后也許還會爆發出更大的能量。
3D在H5中的表現形式
話不多說，直接貼幾個鏈接大家體驗一下。
全景
1、場景全景
這里選了三個比較有代表性的全景H5。
作為近來最HIT的一個H5，其實從技術上來不難實現，最大的賣點就是創意了。進場動畫是一連串的背景畫布旋轉變換迅速飄入視線，試感受下就能體會到這是很棒的視覺盛宴。當然也跟精致的插畫設計分不開。
全景技術是基於Three.js，創建天空盒子並進行貼圖實現的，但由於內容比較少，並且對代碼進行了壓縮，所以體驗起來還是很流暢的。由於背景使用了星空圖，所以從視覺上來說圖與圖之間擁有較高的貼合度。
由於歷時比較長，這里就不放動圖了，大家自己去網址體驗一下吧。
作為一個敘事性的H5，它的場景和動效全部基於代碼實現，而拋棄了視頻這種方式。這給移動端用戶帶來了加載性能上的顯著提升。但它與用戶的交互比較少，因而並不能直觀體現出這是完全基於代碼實現的。並且節奏平緩，沒什么波瀾，配樂略顯哀沉，讓人很難完全體驗完這個長達5分鍾的H5。還不如看一個有趣的視頻。如果能將它融入更多的交互和起伏有序的情節一定能給這個H5增色很多。
2、物品全景
這個比較好理解，就是我們可以通過手勢觸摸物品，觀看到物品各個面的樣式。但是這種應用場景較為局限，一般為某個特定品牌物體展示時才比較適合。
效果可在本文最后的“勝勢全開”例子中體驗。
視差
比較常見的是頁面滾動時的視差。然而使用3D變換中的rotate和translate屬性實現的視差，能更大化地體現出3D效果。實現起來是非常簡單的，只要將圖片中小元素分離出來，然后讓他們以不同的值旋轉移動（注意值不能相差太大，有細微飄動的感覺就可以了）從視覺上便能感覺這些小元素是層疊在一起，動態模擬出不同視角的顯示效果不同。
看一個例子
3D變換
這個H5也是只做造物節那個團隊做的，技術選型依然是js+css3d，同樣是使用了他們團隊封裝的css-engin這個輕量級類庫。這是他們較為早期的作品。不難發現，這個團隊對css3d的運用非常的純屬。
從這個H5來說，剛進入畫面就有物體沖入視線的感覺，並且不斷地運用360°旋轉和鏡頭的拉伸縮放感對視覺造成沖擊。很好地為我們詮釋了，以css3 3d變換打造H5 3d亦不是為一種明智的低成本的實現方式。
H5中3d的表現形式就先談到這里了，接下來我會從技術實現的角度聊聊這些有趣的H5到底是怎么實現的。