博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
H5 + 3D + AR/VR 综述
阅读量:5161 次
发布时间:2019-06-13

本文共 1423 字,大约阅读时间需要 4 分钟。

近年来,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网页游戏等等。

  WebGL完美地解决了现有的Web交互式三维动画的两个问题:第一,它通过 本身实现Web交互式三维动画的制作,无需任何 支持;第二,它利用底层的图形 功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。

  (点击跳转)

  网上关于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展示的效果。

转载于:https://www.cnblogs.com/wsg25/p/9570914.html

你可能感兴趣的文章
vue实战(7):完整开发登录页面(一)
查看>>
[转载]mysql的left,right,substr,instr截取字符串,截取
查看>>
Visual Studio自定义模板(二)
查看>>
【Mood-20】滴滤咖啡做法 IT工程师加班必备 更健康的coffee 项目经理加班密鉴
查看>>
摘抄详细的VUE生命周期
查看>>
javascript高级程序设计---js事件思维导图
查看>>
sprint计划会议
查看>>
读《构建之法-软件工程》第四章有感
查看>>
使用 Printf via SWO/SWV 输出调试信息
查看>>
.net 分布式架构之分布式锁实现(转)
查看>>
吴恩达机器学习笔记 —— 3 线性回归回顾
查看>>
Bouncy Castle内存溢出
查看>>
多线程_java多线程环境下栈信息分析思路
查看>>
机器学习数学【1】
查看>>
Problem E: Automatic Editing
查看>>
Java数组排序
查看>>
SpringBoot 使用 MyBatis 分页插件 PageHelper 进行分页查询
查看>>
《DSP using MATLAB》Problem 6.17
查看>>
微信公众平台开发实战Java版之如何网页授权获取用户基本信息
查看>>
一周TDD小结
查看>>