近年来,H5,3D,AR,VR逐步进入人们的视野,H5生动活泼,3D注重视觉效果,AR打造虚实结合,VR则更加注重虚拟现实的产生。
第一部分,案例展示:
- H5+VR案例: 故事《不要惊慌,没有辐射》
还原30年前核泄露事故,相比简单的H5,融入VR技术后,能让体验者切身感觉穿越回当时事发地,再次展示了事故的真实感。
- H5+VR案例: 《梦幻水晶球》
这个H5页面采用了3D的设计及重力感应等技术,给用户带来了完美的体验,同时为行业树立了全新的技术标杆。
- 某公司汽车展示:
第二部分,开发引擎大观:
不得不说的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网页游戏等等。
(点击跳转)
网上关于threejs的文章和示例比较多。
除了上说的10中引擎外,还发现了一个白鹭时代。
Egret3D:,其定位是:领先的HTML5移动技术与服务提供商。
凭借深厚的技术底蕴和多年行业经验积累,白鹭时代自主研发了白鹭引擎(Egret Engine)、白鹭加速器(Egret Runtime)、骨骼动画工具(Dragon Bones)、可视化编辑器(Egret Wing)等产品。其核心产品白鹭引擎(Egret Engine)已占据国内超七成的手机页游引擎市场份额,白鹭加速器(Egret Runtime)已植入超 10 亿多台移动设备。白鹭时代提供白鹭游戏解决方案,服务游戏、应用、营销、教育、AR/VR等多元领域。目前白鹭全球活跃开发者有 20 多万人次,并与小米、360、腾讯、百度、猎豹、微软等多家公司达成合作。
第三部分,项目开发步骤:
- 第一步是建立3D模型,例如宣传“唐三彩”,如果要结合3D,必须要有模型,目前获取模型的方式有3中,第一种是利用3D扫描仪,扫描获得;第二种是通过,用照片合成3D模型;第三种就是自己通过3D max等建立模型;推荐使用第一种方案。
- 第二步是选择一款合适的3D引擎,经过上网搜索,发现目前使用的项目比较多,Three.js是另一个广泛应用并且功能强大的JavaScript 3D库,但不得不说的是,即使是使用较多的three.js,它的标准文档也不是很多。
- 第三步是用HTML5+JavaScript编写驱动程序和其他界面等,在这一步我们结合第二步中应用的three.js,再导入第一步中建好的模型,就能达到3D展示的效果。