一、创建图片描述符
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