H5 + 3D + AR/VR 综述

Posted 2021-01-03 wsg25

近年来，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展示的效果。