图像追踪、AR识别 、AR.js应用
曦月合一
帮助1人
一、创建图片描述符
1.1 下载创建图片描述符的项目demo链接
https://download.csdn.net/download/qq_39951524/87545994?spm=1001.2014.3001.5503
1.2 下载好后，存储到D盘，或其他盘里
** 注意：** 把你想要的图片放到项目的目录里。
1.3 安装依赖 node.js 在cmd中执行操作命令
node app.js -i <path-to-the-img/image-name.jpg/png>
1.4 具体执行流程为下图
1.5 在这之后，您将在新生成的output文件夹中找到图像描述符文件
在output文件中您将得到三个文件作为图像描述符，分别是.fset、.fset3和.iset。它们在文件扩展名之前都有相同的前缀。例如：ming.fset 、ming.fset3、 ming.iset三个文件都是由ming.jpg生成。
注意：普通格式的图片，AR.js并不能进行识别追踪，因此才需要需要对图片进行处理。
二、页面内容渲染
<!--导入 a-frame 然后导入带有图像追踪和/定位功能的 ar.js-->
<script src="${pageContext.request.contextPath }/statics/js/AR/three.min.js"></script>
<script src="${pageContext.request.contextPath }/statics/js/AR/stats.min.js"></script>
<script src="${pageContext.request.contextPath }/statics/js/AR/ar.js"></script>
<script src="${pageContext.request.contextPath }/statics/js/AR/aframe-master.min.js"></script>
<script src="${pageContext.request.contextPath }/statics/js/AR/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!--在图像描述符加载前显示 loading，根据设备的计算力，加载可能需要一点时间。-->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<!-- a-frame scene -->
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<!-- a-nft是定义图像跟踪实体的锚点 -->
<!-- 在 url 使用到图像描述符的路径之前创建 -->
<!-- 路径应该以名称结束，无需扩展名。举例来说，如果文件是“ming.fset”那么路径的结尾单次就是“ming” -->
<!--path-to-your-image-descriptors:代表图像描述符的路径-->
<a-nft
type="nft"
url="<path-to-your-image-descriptors>"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<!-- 作为 a-nft 的子元素，您可以定义要显示的内容。下面是一个 GLTF 模型实体 -->
<!--path-to-your-model:代表扫描图片显示您的模型的路径-->
<a-entity
gltf-model="<path-to-your-model>"
scale="5 5 5"
gesture-handler="minScale: 0.25; maxScale: 10"
position="100 150 -200"
rotation="-90 0 0"
>
</a-entity>
</a-nft>
<!-- 静态摄像机，根据设备的运动参数进行移动 -->
<a-entity camera></a-entity>
</a-scene>
</body>
三、项目部署
切记 ：手机浏览器打开摄像头需要https协议（必须）
1. 项目放在服务器上部署，html里的文件路径可能需要自行调整。
2. 打开index.html，允许访问摄像头，等待模型加载（加载完成黑屏会消失）。
3. 打开项目里的图片，摄像头对准图片，在画面中调整适中的图片大小，模型就会显示出来。
四、安装需要的插件
4.1 插件aframe-master.min.js、插件aframe-ar-nft.js、three.min.js、stats.min.js、ar.js 集合链接
https://download.csdn.net/download/qq_39951524/87545984?spm=1001.2014.3001.5503
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhfiejhc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24
