没有合适的资源?快使用搜索试试~ 我知道了~
AR技术(增强现实技术Augmented Reality,简称 AR),AR技术在Native中已经兴起了,并且市场上有许多成功的APP,但是对于JavaScript怎么来玩转AR呢?下面我来简单的给大家演示两个不同版本,不同场景的AR小例子。
资源推荐
资源详情
资源评论
hps://zhuanlan.zhihu.com/p/26364493
写之前说几句,以下示例和参考都是 github 上的开源作品,小编只是分享在使
用过程中的踩坑和开发心得。本文适用于小白,由于例子中可能需要使用到
shell 命令,小编的电脑操作系统是 windows 7,如果是 mac 请自行转换为对
应的命令行。
AR 技术(增强现实技术 Augmented Reality,简称 AR),AR 技术在 Nave 中已
经兴起了,并且市场上有许多成功的 APP,但是对于 JavaScript 怎么来玩转 AR
呢?下面我来简单的给大家演示两个不同版本,不同场景的 AR 小例子。
1.首先需要先到 github
上搜索 ar.js,如下图,有 2.8K star 的就是了。
目录结构如下,大家可以 download zip,或者 git clone 下来
这个页面比较简洁,不到 300
行的代码,咱们需要关注两块内容,就可以完成对这个页面例子的改动。
这几行代码什么意思呢,就是一个匹配的规则,匹配的文件是 data 目录中的
Market 标识,说白了就是用让摄像头识别这个标记,官方示例给的标记是
patt.hiro,这个标记的来源图片对应着 data 目录中的 images/hiro.png 这张
图,怎么用这张图来生成 patt.hiro 这个标记呢,这时我们需要使用一个 SDK
工具,微小轻量级的,大家别担心是很重的安装包。这个工具叫 artoolkit,就
是 AR 工具箱,进入官网以后点 download 下载,我选择的是这个
安装完成以后,进入到 D:\Program Files (x86)\ARToolKit5\bin 目录下,接下来我
们就要自定义一个标记了,这里的标记是传统的长方形标记,第一代 market,
稍后会增加自然图片的 market,这里第一代 market 我是用 div 画的,具体的效
果如下:
剩余20页未读,继续阅读
资源评论
beambeam
- 粉丝: 6
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功