摘要:随着随身电子产品运算能力的提升,预期增强现实的用途将会越来越广。本文介绍使用开源框架实现的增强现实的例子。点击允许用手机上的摄像头扫描这张图片神奇的事情就发生了。
增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术,这种技术的目标是在屏幕上把虚拟世界套在现实世界并进行互动。这种技术1990年提出。随着随身电子产品CPU运算能力的提升,预期增强现实的用途将会越来越广。
本文介绍使用JavaScript开源框架AR.js实现的增强现实的Hello World例子。
先看效果:
首先在手机浏览器里打开我部署在github page上的这个demo应用:
https://i042416.github.io/FioriODataTestTool2014/WebContent/098_ar.html
我用的是Android手机安装的Chrome浏览器。
打开网页,会提示你是否允许这个网页应用访问您的手机摄像头。点击允许:
用手机上的摄像头扫描这张图片:
神奇的事情就发生了。您会看到,通过手机摄像头望过去,手机屏幕里会出现一个新的不断滚动的3D物体,如下图所示。
下面具体介绍这个最简单的例子是怎么开发出来的。
所有的源代码在我的github上:
https://github.com/i042416/FioriODataTestTool2014/tree/master/WebContent/ar
新建一个html文件,把下列150行代码粘贴进去,然后在服务器上运行,使用之前描述的步骤即可进行AR测试:
当然,这个效果来自大神jeromeetienne开源的AR.js:
https://github.com/jeromeetienne/AR.js/
当然大神自己也很谦虚地提到,他这个开源的增强现实框架也是建立在巨人的肩膀上开发的:比如其中3D效果的绘制,使用到了另一个开源框架three.js:
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101065.html
摘要:解构是很重要的一个部分。解构代码如下上面的代码表示声明两个变量然后。实际业务中长方形的是不能没有值的。都算正常值的范畴。解构进阶解构时同时使用重命名和设置默认值的语法。若有,若没有属性,那么将赋值为。 Destructuring解构是ES6很重要的一个部分。和箭头函数、let、const 同等地位,解构可能是你日常用到最多的语法之一了。解构是什么意思呢?它是js 表达式,允许我们从数组...
摘要:增强现实以下简称浪潮正滚滚而来,浏览器作为人们最唾手可得的人机交互终端,正在大力发展技术。目前年底前端要想实现,都是靠的视频透视式技术。但这两个都是移动的,于是谷歌的团队提供了和两个库,以便开发者能用技术来基于和开发,从而实现。 本文作者 GeekPlux,博客地址:http://geekplux.com/2018/01/18/augmented-reality-development...
阅读 2371·2021-11-22 15:35
阅读 3724·2021-11-04 16:14
阅读 2664·2021-10-20 13:47
阅读 2465·2021-10-13 09:49
阅读 2041·2019-08-30 14:09
阅读 2307·2019-08-26 13:49
阅读 858·2019-08-26 10:45
阅读 2743·2019-08-23 17:54