AR.JS Can't get Video or Picture working with NFT only 3D

问题

I finally have given up as I can't get AR.JS to run with a simple NFT marker that should display a Video or a PNG image over it. If I run it with a GLTF Model it works without problems. I tried changing the scale and position to see if it is somehow behind the marker etc. but that doesn't help in any way.

The console doesn't throw me any errors as well.

Could anybody throw me a short fix as I tried a lot of different stuff but nothing gets displayed.

Link to page with marker https://natrium83.github.io

Link to 3D example https://natrium83.github.io/ar3d/

Link to Picture example https://natrium83.github.io/arbild/

Link to Video example https://natrium83.github.io/arvideo/

Here is the code for the image:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Image based tracking AR.js demo</title>
    <!-- import aframe and then ar.js with image tracking / location based features -->
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

    <!-- style for the loader -->
    <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>
  </head>
  <body style="margin : 0px; overflow: hidden;">
    <!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
    <div class="arjs-loader">
      <div>Loading, please wait...</div>
    </div>

    <!-- a-frame scene -->
    <a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true;"
      embedded
      arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
      <!-- a-nft is the anchor that defines an Image Tracking entity -->
      <!-- on 'url' use the path to the Image Descriptors created before. -->
      <!-- the path should end with the name without the extension e.g. if file is trex.fset' the path should end with trex -->
      <a-nft
        type="nft"
        url="https://natrium83.github.io/ar3d/assets/marker_image"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5">
          <!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity -->
          <a-entity>



          <a-image src="https://natrium83.github.io/arbild/assets/bild.png"
              scale="5 5 5"
              position="100 100 0"
              crossorigin
          ></a-image>
          </a-entity>

      </a-nft>
      <!-- static camera that moves according to the device movemenents -->
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

'''

回答1:

The problem might be the size of the media. Despite the documentation saying '1' = 1 meter, I had to set the size to height='160' width='120' to get mine working. Hope it works for you as well.

来源：https://stackoverflow.com/questions/61773016/ar-js-cant-get-video-or-picture-working-with-nft-only-3d

标签

aframe

ar.js