十行HTML实现增强现实

阅读：2278 添加日期：2021/3/27 23:25:23 原文链接：https://www.toutiao.com/item/6430557795229106689/

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

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

XHTML

12345678910

<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 embeddedartoolkit='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>

我们来一行一行看.

引入库

XHTML

123	<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 年前的旧手机。

定义 Body

XHTML

123	<body style='margin : 0px; overflow: hidden;'><!-- ... --></body>

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

创建 3d 场景

XHTML

123	<a-scene embeddedartoolkit='sourceType: webcam;'><!-- put your 3d content here --></a-scene>

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

添加简单的内容

XHTML

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

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

（视频截图）

十行HTML实现增强现实

增加 AR 摄像头

XHTML

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

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

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

（一些截图）

十行HTML实现增强现实

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

英文出处：Alexandra Etienne