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展现的效果。