十行HTML实现增强现实--思途青岛

web开发作者:dayu日期:10天前点击:4

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

定义 Body
技术分享

这一步,国际惯例。就像你在所有 HTML 页面中做的一样,定义 body。
创建 3d 场景。
技术分享

然后,我们将要创建我们的 a-farme 场景。我们当然也需要加入 ARToolkit 组件。ARToolkit是一个开源库,我们通过它来实现摄像头定位。
添加简单的内容
技术分享
一旦我们创建了 3d 场景,我们可以开始向里面添加对象。在这行代码中,我们添加了一个简单的盒子。然后我们修改了它的材质,让它变得透明。我们也改变了它的位置,所以它出现在 AR 标识(AR marker)的上方。
增加 AR 摄像头
技术分享
在最后一步,我们增加一个摄像头。我们预设一个 ‘hiro’最后,我们让它像你手机一样移动。是不是很简单?
恭喜!你完成了。你仅用了 10 行html代码实现了增强现实,手机上也能运行飞快,而且免费。

十行HTML实现增强现实--思途青岛

原文地址:http://www.cnblogs.com/chinasitu/p/7233855.html


下一篇       上一篇