AR.js NFT marker not working on server: 404 error with ar-nft.js

NFT
1

I’m experiencing issues with AR.js when trying to use NFT markers on my GitHub page. The project runs perfectly on my local machine, but once uploaded, ar-nft.js returns a 404 error. I attempted to use an alternative link for ar-nft.js; however, the problem persists. It seems like the server is unable to locate the NFT data files. Can someone suggest a solution?

Here’s a simplified version of the code I’m using:

<!DOCTYPE html>
<html>
<head>
  <script src="arjs-lib.js"></script>
  <script src="three-lib.js"></script>
</head>
<body>
  <script>
    function setupAR() {
      const scene = new THREE.Scene();
      const camera = new THREE.Camera();
      const renderer = new THREE.WebGLRenderer({ alpha: true });
      
      const arSource = new ARToolkitSource({ sourceType: 'webcam' });
      const arContext = new ARToolkitContext({
        cameraParametersUrl: 'camera_data.dat',
        detectionMode: 'color'
      });
      
      const markerRoot = new THREE.Group();
      scene.add(markerRoot);
      
      const markerControl = new ARMarkerControls(arContext, markerRoot, {
        type: 'nft',
        descriptorsUrl: 'my-nft-marker',
        smooth: true
      });
      
      // Load 3D model and add to scene
      loadModel('mymodel.glb', (model) => {
        markerRoot.add(model);
      });
      
      function animate() {
        requestAnimationFrame(animate);
        arContext.update(arSource.domElement);
        renderer.render(scene, camera);
      }
      animate();
    }
    
    setupAR();
  </script>
</body>
</html>

Any ideas on resolving the NFT marker issue on the server?

2

I encountered a similar issue when deploying AR.js projects to GitHub Pages. One solution that worked for me was to ensure all file paths are relative to the root of your GitHub Pages site. For example, instead of ‘camera_data.dat’, try ‘/camera_data.dat’ or ‘…/camera_data.dat’ depending on your file structure.

Additionally, verify that your GitHub Pages settings are correctly configured. Sometimes, the source branch or directory settings can cause unexpected 404 errors. It’s also worth checking if GitHub Pages is properly building your site - you can check this in the repository settings under the Pages tab.

Lastly, consider using a content delivery network (CDN) for AR.js and Three.js libraries. This can sometimes resolve issues with script loading. If the problem persists, you might want to use browser developer tools to monitor network requests and identify exactly which resources are failing to load.

3

hey ray84, i had a similar issue. try checking ur file paths and make sure they’re correct on the server. sometimes local paths don’t translate well when uploaded. also, double-check that all necessary files (including nft data) are actually uploaded to the right place on github. good luck!

4

hey Ray84! i’ve run into similar probs before, it can be so frustrating :weary: have u tried using absolute URLs for your files instead of relative ones? that might help with the 404 error. also, curious - what’s the file structure like on your github repo? sometimes i’ve found that github pages can be picky about how things are organized. oh, and random thought - have u checked your browser console for any other errors? there might be more clues hiding in there! let us know how it goes, k? we’re all rooting for ya! :raised_hands: