AR.js NFT marker not working on GitHub Pages (404 error)

NFT
1

I’m having trouble with AR.js and NFT markers. My project runs fine locally but breaks when I put it on GitHub Pages. The ar-nft.js file throws a 404 error. I tried using a CDN link but no luck. I think the server can’t find the NFT descriptor files.

Here’s what I’ve done:

  • Set up AR.js with Three.js
  • Created a custom NFT marker
  • Added a 3D model that shows up when the marker is detected
  • Tested successfully on localhost
  • Uploaded to GitHub Pages

The code uses:

  • ar-nft.js from AR.js
  • Three.js for 3D rendering
  • GLTFLoader to load the model
  • Video texture for the webcam feed

Any ideas on how to fix this? Maybe I’m linking the NFT files wrong? Help would be awesome!

2

hey there mayapixel55! that sounds like a tricky issue ur dealing with :thinking: have u checked if the file paths for ur nft descriptor files are correct on github pages? sometimes the structure can be different than on localhost. also, make sure ur using relative paths instead of absolute ones

another thing to consider - did u remember to push all the necessary files to ur github repo? it’s easy to forget smth important!

oh and btw, have u tried using the network tab in ur browser’s dev tools to see exactly which files are causing 404 errors? that might give u more clues

let us know if any of that helps! ar stuff can be so finicky sometimes lol. good luck with ur project!

3

I encountered a similar issue when deploying an AR.js project to GitHub Pages. The problem often lies in the file path references. Ensure your NFT descriptor files (.fset, .fset3, .iset) are in the correct directory relative to your HTML file on GitHub Pages.

Double-check your AR.js initialization code. Make sure you’re using the correct path to your NFT files. It should be something like:

ARnft.init('/path/to/your/nft/marker', 'camera_para.dat', { ... })

Also, verify that your GitHub Pages settings are correct. The site should be built from the correct branch and directory. If you’re using a custom domain, ensure it’s properly configured.

Lastly, clear your browser cache and try accessing the page in an incognito window to rule out any local caching issues.

4

hey maya, have you tried using an absolute URL for ur nft files? double chck ur gh-pages settings. github pages sometimes take a bit to update changes. maybe try a diff cdn if ur issue persists.

good luck!