菜单

十行HTML完结抓好现实

2019年10月29日 - 银河官方网站
十行HTML完结抓好现实

十行HTML实现增强现实

2017/06/11 · HTML5 · 1
评论

本文由 伯乐在线 –
一杯哈希不加盐
翻译,艾凌风
校稿。未经许可,禁止转载!
英文出处:Alexandra
Etienne。欢迎加入翻译组。

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

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

XHTML

<!– Augmented Reality on the Web in 10 lines of html!
–> <script
src=”;
<script
src=”;
<script>THREEx.ArToolkitContext.baseURL =
‘;
<body style=’margin : 0px; overflow: hidden;’> <a-scene
embedded artoolkit=’sourceType: webcam;’> <a-box position=’0 0.5
0′ material=’opacity: 0.5;’></a-box> <a-marker-camera
preset=’hiro’></a-marker-camera> </a-scene> </body>

1
2
3
4
5
6
7
8
9
10
<!– Augmented Reality on the Web in 10 lines of html! https://github.com/jeromeetienne/ar.js –>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = ‘https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
<body style=’margin : 0px; overflow: hidden;’>
    <a-scene embedded artoolkit=’sourceType: webcam;’>
        <a-box position=’0 0.5 0′ material=’opacity: 0.5;’></a-box>
        <a-marker-camera preset=’hiro’></a-marker-camera>
    </a-scene>
</body>

我们来一行一行看.

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

引入库

XHTML

<script
src=”;
<script
src=”;
<script>THREEx.ArToolkitContext.baseURL =
‘;

1
2
3
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = ‘https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>

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

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

定义 Body

XHTML

<body style=’margin : 0px; overflow: hidden;’> <!– … –>
</body>

1
2
3
<body style=’margin : 0px; overflow: hidden;’>
    <!– … –>
</body>

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

银河官方网站 1

创建 3d 场景

XHTML

<a-scene embedded artoolkit=’sourceType: webcam;’> <!– put
your 3d content here –> </a-scene>

1
2
3
<a-scene embedded artoolkit=’sourceType: webcam;’>
    <!– put your 3d content here –>
</a-scene>

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

引入库

添加简单的内容

XHTML

<a-box position=’0 0.5 0′ material=’opacity: 0.5;’></a-box>

1
<a-box position=’0 0.5 0′ material=’opacity: 0.5;’></a-box>

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

(视频截图)

银河官方网站 2

银河官方网站 3

增加 AR 摄像头

XHTML

<a-marker-camera preset=’hiro’></a-marker-camera>

1
<a-marker-camera preset=’hiro’></a-marker-camera>

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

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

可以看一下我做的视频教程(搬运自youtube,字幕为 youtube
自动识别内嵌字幕,有少量识别误差,不影响观看):

(一些截图)

银河官方网站 4

打赏支持我翻译更多好文章,谢谢!

打赏译者

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

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

银河官方网站 5
银河官方网站 6

2 赞 8 收藏 1
评论

定义 Body

关于作者:一杯哈希不加盐

银河官方网站 7

毕业于郑州大学软件工程专业,身为
Java 程序猿也常用 JavaScript 做点好玩的东西
。为了兴趣而写代码,做自己喜欢做的事。Keep Coding … Stay Cool …
(单身,欢迎骚扰)
个人主页 ·
我的文章 ·
30 ·
   

银河官方网站 8

银河官方网站 9

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

创建 3d 场景。

银河官方网站 10

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

添加简单的内容

银河官方网站 11

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

增加 AR 摄像头

银河官方网站 12

银河官方网站,在最后一步,我们增加一个摄像头。我们预设一个
‘hiro’最后,我们让它像你手机一样移动。是不是很简单?

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图