H5 + 3D + AR/VR 綜述

近年來，H5,3D,AR,VR逐步進入人們的視野，H5生動活潑，3D注重視覺效果，AR打造虛實結合，VR則更加注重虛擬現實的產生。

第一部分，案例展示：

• H5+VR案例： 故事《不要驚慌，沒有輻射》http://c.3g.163.com/nc/qa/qiernuovr/index.html

　　

　　還原30年前核泄露事故，相比簡單的H5，融入VR技術后，能讓體驗者切身感覺穿越回當時事發地，再次展示了事故的真實感。

• H5+VR案例： 《夢幻水晶球》

　　

　　這個H5頁面采用了3D的設計及重力感應等技術，給用戶帶來了完美的體驗，同時為行業樹立了全新的技術標桿。

• 某公司汽車展示：

　　

• 設計師怎么玩轉Html5 3D游戲，一款讓開發都折服的H5

　　

第二部分，開發引擎大觀：

　　不得不說的webgl：

　　webgl：WebGL（全寫Web Graphics Library）是一種3D繪圖協議，這種繪圖技術標准允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就可以借助系統顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創建復雜的導航和數據視覺化。顯然，WebGL技術標准免去了開發網頁專用渲染插件的麻煩，可被用於創建具有復雜3D結構的網站頁面，甚至可以用來設計3D網頁游戲等等。

　　WebGL完美地解決了現有的Web交互式三維動畫的兩個問題：第一，它通過 HTML腳本本身實現Web交互式三維動畫的制作，無需任何 瀏覽器插件支持;第二，它利用底層的圖形 硬件加速功能進行的圖形渲染，是通過統一的、標准的、跨平台的OpenGL接口實現的。

　　Top 10：HTML5、JavaScript 3D游戲引擎和框架（點擊跳轉）

　　網上關於threejs的文章和示例比較多。

 　　

　　除了上說的10中引擎外，還發現了一個白鷺時代。

　　Egret3D：https://egret.com/products/engine3D.html，其定位是：領先的HTML5移動技術與服務提供商。

　　憑借深厚的技術底蘊和多年行業經驗積累，白鷺時代自主研發了白鷺引擎（Egret Engine）、白鷺加速器（Egret Runtime）、骨骼動畫工具(Dragon Bones)、可視化編輯器（Egret Wing）等產品。其核心產品白鷺引擎（Egret Engine）已占據國內超七成的手機頁游引擎市場份額，白鷺加速器（Egret Runtime）已植入超 10 億多台移動設備。白鷺時代提供白鷺游戲解決方案，服務游戲、應用、營銷、教育、AR/VR等多元領域。目前白鷺全球活躍開發者有 20 多萬人次，並與小米、360、騰訊、百度、獵豹、微軟等多家公司達成合作。

第三部分，項目開發步驟：

• 第一步是建立3D模型，例如宣傳“唐三彩”，如果要結合3D，必須要有模型，目前獲取模型的方式有3中，第一種是利用3D掃描儀，掃描獲得；第二種是通過Autodesk 123D，用照片合成3D模型；第三種就是自己通過3D max等建立模型；推薦使用第一種方案。
• 第二步是選擇一款合適的3D引擎，經過上網搜索，發現目前使用Three.js的項目比較多，Three.js是另一個廣泛應用並且功能強大的JavaScript 3D庫，但不得不說的是，即使是使用較多的three.js，它的標准文檔也不是很多。
  
• 第三步是用HTML5+JavaScript編寫驅動程序和其他界面等，在這一步我們結合第二步中應用的three.js，再導入第一步中建好的模型，就能達到3D展示的效果。