首页 编程 软件学院 查看内容

十行HTML实现增强现实

2017-6-12 12:08 |来自: 互联网 1973 0

摘要: 你想通过网络实现增强现实吗?现在你只需要 10 行 HTML 代码!真的!让我带你看一看代码,非常简单。我们最近发布了AR.js。你不需要安装任何应用,用你的手机通过网络就能体验到强大的增强现实。但让我们更进一步, ...

你想通过网络实现增强现实吗?现在你只需要 10 行 HTML 代码!真的!让我带你看一看代码,非常简单。

我们最近发布了AR.js。你不需要安装任何应用,用你的手机通过网络就能体验到强大的增强现实。但让我们更进一步,看一下如何让你也创作出自己的增强现实体验。多亏了神奇的a-frame,最短的 AR.js 只有 10 行 HTML 代码。你可以在codepen看到在线版:

XHTML

12345678910

我们来一行一行看.

引入库

XHTML

123

首先,你需要引入a-frame,一款MozillaVR引领的开发 VR 体验的利器。A-frame 包含了 three.js。然后你只需要为 a-frame 引入 AR.js。AR.js能让 AR 中的 3d 显示在你的手机上高速运行,哪怕是 2、3 年前的旧手机。

定义 Body

XHTML

123

这一步,国际惯例。就像你在所有 HTML 页面中做的一样,定义 body。

创建 3d 场景

XHTML

123

然后,我们将要创建我们的 a-farme 场景。我们当然也需要加入 ARToolkit 组件。ARToolkit是一个开源库,我们通过它来实现摄像头定位。

添加简单的内容

XHTML

1

一旦我们创建了 3d 场景,我们可以开始向里面添加对象。在这行代码中,我们添加了一个简单的盒子。然后我们修改了它的材质,让它变得透明。我们也改变了它的位置,所以它出现在 AR 标识(AR marker)的上方。

(视频截图)

增加 AR 摄像头

XHTML

1

在最后一步,我们增加一个摄像头。我们预设一个 ‘hiro’(来自Hiro marker)最后,我们让它像你手机一样移动。是不是很简单?

恭喜!你完成了。你仅用了 10 行 HTML 代码实现了增强现实,手机上也能运行飞快,而且免费。

(一些截图)

FROM:伯乐在线 - 孙腾浩 翻译,艾凌风 校稿

本文出处: http://www.toutiao.com/a6430433997309886721/
声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

最新评论

返回顶部