使用AR.js打造WebAR入门课程（二）——基于图像标记，自行替换图像及模型

胡晓天o0

于 2021-04-16 10:47:15 发布

阅读量1.7k

点赞数 3

分类专栏：前端笔记 ar.js 文章标签： ar webwr ar.js 前端

本文链接：https://blog.csdn.net/qq_24127447/article/details/115750035

版权

本文档详细介绍了如何使用AR.js库替换自定义模型和图像标记。首先，展示了官方示例代码，并解释了关键部分，如<a-nft>和<a-entity>标签的用途。接着，强调了模型和图像的要求，模型替换只需更改模型地址，而图像替换则需要通过NFT Marker Creator训练。训练后将得到的文件替换到代码中即可。最后，提供了作者自己的代码示例，展示如何实际操作替换过程。

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

在上一篇文章中只是简单地介绍了一下官方中基于图像标记的例子，并没有说到自己替换图像以及模型，这一篇文章主要就是简单讲一下怎么把自己的模型和图像替换上去。

上一篇文章地址：https://blog.csdn.net/qq_24127447/article/details/115718301

官方示例地址：https://github.com/AR-js-org/AR.js

首先先放一下官方示例的代码，然后我们根据代码来进行讲解。

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="js/aframe-ar-nft.js"></script>
 
<style>
  /*加载过程中蒙罩的css*/
  .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-siz

最低0.47元/天解锁文章