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：HTML五、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展現的效果。