文章目录
- 背景介绍
- 技术介绍
- 准备目标图片
- 准备3D模型
- 整合到一起
- 演示代码地址
背景介绍
本文实现web端html实现AR识别功能
在日常生活中常常看到AR虚拟现实相结合的案例
如下图的效果匹配到目标图片后展示3D模型 从而提高真实度
AR识别
技术介绍
想要达到效果有以下几步是必须的
- 准备目标图片
- 提取目标图片特征点 保存特征文件
- 准备3D模型文件
- 融合到一起实现效果
通过AR.js 来处理AR方面图像追踪匹配目标等功能
通过Aframe来配合AR.js 实现功能 (其中3D模型渲染功能也是在Three.js基础上封装的)
通过 ARJS手势库arjs-gestures实现手势控制渲染出的模型
图片特征点提取 AR.js 的 Create Image Descriptors 方法
注意:运行html文件时必须在https环境运行，因为要获取摄像头权限，必须https才可以获取摄像头权限
准备目标图片
- 准备一张图片（当摄像头内存在这张照片就会渲染3D模型）
- 对图片进行特征点提取 提取特征点链接
官方提供了两种方法
1 通过在线web页面生成图片特征文件 （因为是国外的网站所以不推荐这种方法）
2 通过node 代码生成图片特征文件 推荐 node仓库地址 node 版本建议16.19.1左右 太高也是不行的哦
最终会生成：描述文件名.fset、描述文件名.fset3、描述文件名.iset、三个特征文件将这三个文件保存到一个文件夹中
准备3D模型
推荐一个国外免费下载3D模型的文件 网站 因为是国外的，记得要安全上网哦。
下载glTF类型文件
有这个gltf文件就行
整合到一起
注意
引入js aframe-master.min.js 文件内容
引入js aframe-ar-nft.js 文件内容
引入js gestures.js 文件内容
描述文件路径根据实际地址填写
模型文件路径根据实际地址填写
运行此Html必须要是https环境，否则无法实现效果
<!DOCTYPE html>
<html lang="en">
<head>
