AR.js study notes

Chinese document link:

Home | AR.js AR.js is a lightweight framework for web-side augmented reality with features such as image tracking, location-based AR, and marker tracking. http://febeacon.com/arjs-docs-zh-cn/routes/ AR.js depends on A-Frame, you need to read it first if you want to understand the documentation;
Introduction - A-Frame Chinese Documentation - Wenjiang Blog What is A- Frame? -Frame is a web development framework for building virtual reality (VR) applications. Developed by the Mozilla VR team, the initiator of WebVR, it is the current mainstream technical solution for developing WebVR content. WebVR is a completely open source project that has grown into a leading VR community… https://www.wenjiangs.com/doc/aframe-introduce article is probably enough to read, and then read it carefully when necessary;

After reading it, let's paste the example in the article and run it:

This is the code for image tracking. Note that the access must be HTTPS protocol to open the camera. I use the HTTPS website built by the IIS manager that comes with windows (the IIS manager will not be able to use Baidu by itself), pay attention Several resources loaded here are all overseas addresses, it is best to download them locally first;

<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>

Then open this page and scan this photo to see the effect of ar.

If you want to change the picture, you can convert the picture on this page. The higher the picture resolution, the better the recognition effect.

NFT-Creator-Web https://carnaux.github.io/NFT-Marker-Creator/#/ After downloading, replace the url of the a-nft tag without writing the suffix. Three files will be downloaded and placed in the same directory.

You can use SketchUp as a model, it looks simpler than 3Dmax, and there is no specific research.

After completing the model, use this plugin to export the gltf format file to replace the gltf-model of the a-entity tag, and then you can see the model you made.

Export glTF (glTF Export) - SU Plugin Encyclopedia https://www.suplugin.com/gltf-export/

At present, I can identify the picture display model that I made, but the location has not been figured out, it often appears in different places, and it also shakes. After I finish my research, I will continue to share it with you to show the effect

Guess you like