AR.js 学习笔记

中文文档链接：

首页 | AR.jsAR.js 是 Web 端增强现实的轻量级框架，具有图像追踪、基于位置的AR和标记跟踪等功能。http://febeacon.com/arjs-docs-zh-cn/routes/AR.js依赖于A-Frame，想看懂文档需要先看下；
简介 - A-Frame 中文文档 - 文江博客什么是 A-Frame？ -Frame 是一个用来构建虚拟现实（VR）应用的网页开发框架。由WebVR的发起人Mozilla VR 团队所开发，是当下用来开发WebVR内容主流技术方案。WebVR是一个完全开源的项目，已成长为领先的VR社区…https://www.wenjiangs.com/doc/aframe-introduce文章大概看下就可以了，有需要时再细看；

看完之后我们先把文章中的示例粘贴下来跑一下：

这是图像追踪的代码，注意访问是必须要是HTTPS的协议才能打开摄像头，我是用的windows自带的IIS管理器搭建的HTTPS的网站（IIS管理器的使用方法不会可以自行百度），注意这里面加载的几个资源都是境外的地址，最好先下载到本地；

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/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;">
  <!--图像加载前显示加载中...-->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!--我们使用了 cors 代理来避免跨域问题-->
    <a-nft
      type="nft"
      url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-entity
        gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
        scale="5 5 5"
        position="50 150 0"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

之后打开这个页面扫描这张照片就可以看到ar的效果了。

想换图片可以在这个页面里可以转换图片，图片分辨率越高识别效果越好。

NFT-Creator-Webhttps://carnaux.github.io/NFT-Marker-Creator/#/下载后将 a-nft 标签的url替换掉不用写后缀，会下载三个文件放在同一目录下，

可以用SketchUp做模型，看上去比3Dmax简单些，还没有具体研究。

做好模型后用这个插件导出gltf格式的文件替换a-entity标签的gltf-model就可以看到自己做的模型了。

导出glTF (glTF Export) - SU插件百科https://www.suplugin.com/gltf-export/

目前我自己做出来的可以识别图片显示模型，但是位置还没有搞明白，经常出现在不同的地方，还会抖动。等我研究完再继续分享给大家展示效果

猜你喜欢