AR.js | 图像跟踪，特征识别触发事件

最新推荐文章于 2025-03-08 11:30:20 发布

Nora Taki

最新推荐文章于 2025-03-08 11:30:20 发布

阅读量5.4k

点赞数 8

分类专栏：前端开发文章标签：前端

本文链接：https://blog.csdn.net/u011974819/article/details/117470267

版权

前端开发专栏收录该内容

16 篇文章

订阅专栏

博客介绍了AR.js中的图像跟踪模式，它利用自然特征点跟踪技术提取图片特征点，通过识别影像中的特征点确定图像位置和方向，构建场景。还提到AR.js默认定义的事件会在图像特征被识别时触发。此外，讲解了通过NFT - Marker - Creator项目实现从图片到特征数据的转换，并给出示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图像跟踪 & 事件触发

AR.js中提供了图像跟踪（Image Tracking）、基于定位（Location Based）、基于标记（Marker Based） 三种模式。其中图像跟踪模式是通过设备摄像头，扫描图片、绘画、照片等内容，从而定位场景的模式。

图像跟踪模式，是用 自然特征点跟踪（Nature Feature Tracking、NFT） 技术，将图片中的特征点进行提取。然后通过识别影像中是否存在这些特征点，来确定图像的位置和方向，构建场景，进一步加载或者渲染期望的模型。厉害的是，生成特征时用的是图片，但检测的时候可以是实物。

而AR.js默认定义了 markerFound 事件，图像跟踪模式下，该事件会在图像特征被识别的时候触发。因此可以利用此做些事情。

特征数据构建

通过 NFT-Marker-Creator 项目，可以实现从图片到特征数据的转换

将项目克隆到本地 git clone https://github.com/Carnaux/NFT-Marker-Creator.git
安装依赖包 npm install
建一个 input 目录，将需要转换的图片拷贝到其中
执行 node app.js -i PATH/TO/IMAGE
项目中会生成一个 output 文件夹，其中以图片名称命名的 .fset、.fset3、.iset 三个文件的内容便是特征数据
将生成的3个文件单独放在一个文件夹下，引用资源的路径为，后缀名的 path/filename 即可

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trigger actions when image has been found</title>

    <script src="/js/aframe-master.min.js"></script>
    <script src="/js/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>
    <script>
        // 注册markerhandler组件
        // 该组件中注册了，当场景中检测到图像时触发的事件
        AFRAME.registerComponent('markerhandler', {
            init: function () {
                this.el.sceneEl.addEventListener('markerFound', () => {
                    alert('hello ar!')
                });
            }
        });
    </script>
</head>

<body style="margin : 0px; overflow: hidden;">
    <div class="arjs-loader">
        <div>Loading, please wait...</div>
    </div>
    <a-scene>
        <a-nft markerhandler type="nft" url="/trex/gic"></a-nft>
    </a-scene>
</body>

</html>