资讯专栏INFORMATION COLUMN

150行JavaScript代码实现增强现实

Arno / 3425人阅读

摘要:随着随身电子产品运算能力的提升,预期增强现实的用途将会越来越广。本文介绍使用开源框架实现的增强现实的例子。点击允许用手机上的摄像头扫描这张图片神奇的事情就发生了。

增强现实技术(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

相关文章

  • SAP C/4HANA与人工智能和增强现实(AR)技术结合的又一个创新案例

    摘要:今天我想给大家分享一个我去年参与开发的项目,在上结合近些年比较热门的人工智能和增强现实技术打造的一个创新案例。用户故事近些年来,诸如人工智能和增强现实等技术迅猛发展,如何利用好这些先进技术,帮助企业实现数字化转型,是一个值得思考的问题。 今天这篇迟到的文章,来自我的同事Aviva。 去年SAP C/4HANA发布之后,SAP的从业者们可能或多或少都读过一些来自SAP官方渠道,比如微信公...

    eternalshallow 评论0 收藏0
  • ES6系列文章 Destructuring

    摘要:解构是很重要的一个部分。解构代码如下上面的代码表示声明两个变量然后。实际业务中长方形的是不能没有值的。都算正常值的范畴。解构进阶解构时同时使用重命名和设置默认值的语法。若有,若没有属性,那么将赋值为。 Destructuring解构是ES6很重要的一个部分。和箭头函数、let、const 同等地位,解构可能是你日常用到最多的语法之一了。解构是什么意思呢?它是js 表达式,允许我们从数组...

    JiaXinYi 评论0 收藏0
  • 简单谈谈Google ARCore客户端

    摘要:这个是其一,还有一种是为了,如果防止的物体本色就是一个颜色比较亮丽的,但是周围环境却比较暗淡,这种情况可以自动去调节物体的亮度光强度三功能介绍云瞄点客户端可以改变对自身位置和环境的理解来调整姿态。 一、前言 AR(Augmented Reality:增强现实) 今年年初上的一部电影:《头号玩家》,就是一个虚拟游戏世界,模拟出了各种现实的感觉。 当然,我个人的理解,头号玩家里面的场景我是...

    syoya 评论0 收藏0
  • Web 前端中的增强现实(AR)开发技术

    摘要:增强现实以下简称浪潮正滚滚而来,浏览器作为人们最唾手可得的人机交互终端,正在大力发展技术。目前年底前端要想实现,都是靠的视频透视式技术。但这两个都是移动的,于是谷歌的团队提供了和两个库,以便开发者能用技术来基于和开发,从而实现。 本文作者 GeekPlux,博客地址:http://geekplux.com/2018/01/18/augmented-reality-development...

    Jochen 评论0 收藏0
  • Web 前端中的增强现实(AR)开发技术

    摘要:增强现实以下简称浪潮正滚滚而来,浏览器作为人们最唾手可得的人机交互终端,正在大力发展技术。目前年底前端要想实现,都是靠的视频透视式技术。但这两个都是移动的,于是谷歌的团队提供了和两个库,以便开发者能用技术来基于和开发,从而实现。 本文作者 GeekPlux,博客地址:http://geekplux.com/2018/01/18/augmented-reality-development...

    fanux 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<