Troubleshooting NFT marker issues in React-based AR.js application

NFT
1

Hey everyone,

I’m working on an augmented reality app using React and AR.js. I set it up with create-react-app and deployed it to Firebase. But I’m running into some problems with the NFT markers.

When I launch the app, the camera starts up fine, but I get these errors in the console:

Error loading KPM data: error reading data.
Error reading KPM data from /markerNFT_0.fset3
ARToolKitJS(): Unable to set up NFT marker.

I’ve double-checked the markers and they work in other apps, so I’m pretty sure they’re okay. The GLTF file and markers are downloading correctly too.

I’ve included the AR.js and A-Frame scripts in my index.html:

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

And here’s a snippet from my Home.js component:

<a-scene
  vr-mode-ui="enabled: false;"
  renderer="logarithmicDepthBuffer: true;"
  embedded
  arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
  <a-nft
    type="nft"
    url="https://reactlogin3.web.app/trex"
    smooth="true"
    smoothCount="10"
    smoothTolerance=".01"
    smoothThreshold="5"
  >
    <a-entity
      gltf-model="https://reactlogin3.web.app/scene.gltf"
      scale="5 5 5"
      position="0 0 0"
    >
    </a-entity>
  </a-nft>
  <a-entity camera></a-entity>
</a-scene>

Any ideas on what might be causing these errors or how to fix them? Thanks!

2

yo mayapixel55, those nft marker issues are a pain! have u double-checked ur file paths? sometimes the url structure can be tricky with firebase. also, make sure ur using the latest AR.js version - older ones can be buggy with react. if that doesnt work, try moving the marker files to a different hosting service like github pages. good luck!

3

I’ve encountered similar issues with NFT markers in React-based AR.js applications. One potential solution is to ensure your marker files (.fset, .fset3, .iset) are being served with the correct MIME types. Firebase hosting sometimes doesn’t set these automatically for less common file types.

Try adding a firebase.json file to your project root with the following content:

{
  "hosting": {
    "headers": [
      {
        "source": "**/*.@(fset|fset3|iset)",
        "headers": [ {
          "key": "Content-Type",
          "value": "application/octet-stream"
        } ]
      }
    ]
  }
}

This should ensure the marker files are served correctly. Also, double-check that your marker file names match exactly in both the URL and the actual files. Case sensitivity can sometimes cause issues here.

If these don’t resolve the problem, consider using the development build of AR.js for more detailed error messages. This might provide more insight into what’s going wrong during marker setup.

4

hey there MayaPixel55! wow, sounds like you’ve got a pretty cool AR project going on. those NFT marker errors can be super frustrating, ugh.

have you tried checking if the marker files are actually accessible at the URL you’re using? sometimes firebase hosting can be a bit finiky with file permissions. maybe try accessing the .fset3 file directly in your browser to see if it loads?

also, i’ve had issues before where the AR.js version wasn’t playing nice with my react setup. have you considered trying a different version of AR.js? or maybe wrapping the AR.js initialization in a useEffect hook to ensure everything’s loaded before it tries to set up the markers?

oh, and totally random thought - but are you testing on https? i remember AR.js being picky about that sometimes.

let me know if any of that helps or if you want to bounce around more ideas! ar dev can be a real headache sometimes, but it’s so cool when it finally works.