Help Needed: AR.js NFT Tracking – Image Not Displaying After Marker Detection

[MrCyberNaut]

Hey everyone,

I’ve been working on an AR.js project using NFT (image-based) tracking. My goal is to display an image (a plane with a texture) when the target image is detected. The marker is being detected (I see the console messages for “Marker detected”), but my display image never appears. I've tried several adjustments and even looked at some sample codes, but nothing seems to work.

Here’s the code I’m using:

`

Loading, please wait...

AR.js is initializing...

<a-scene
  vr-mode-ui="enabled: false;"
  loading-screen="enabled: false;"
  renderer="logarithmicDepthBuffer: true;"
  arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
  embedded
>
  <a-assets>
    <!-- This image is the one I want to display -->
    <img
      id="display-image"
      src="https://cdn.glitch.global/7ea9ad8f-24fd-49e9-9eaf-47e2cbf1d484/a78a090a-246b-44c0-909e-d92ce563f65c.image.png?v=1738169724953"
      crossorigin="anonymous"
    />
  </a-assets>

  <!-- Replace "assets/all_speakers" with your actual NFT descriptor folder -->
  <a-nft
    id="nft-marker"
    type="nft"
    url="assets/all_speakers"
    smooth="true"
  >
    <!-- The plane that should display the image.
         Note the rotation is set to -90 0 0 so that the plane lays flat. -->
    <a-plane
      material="src: #display-image; transparent: true;"
      position="0 0.1 0"
      rotation="-90 0 0"
      width="1.5"
      height="2"
    ></a-plane>
  </a-nft>

  <a-entity camera></a-entity>
</a-scene>

<script>
  const scene = document.querySelector("a-scene");
  const infoMessage = document.getElementById("infoMessage");
  const loadingMessage = document.getElementById("loadingMessage");

  function showInfo(message) {
    infoMessage.textContent = message;
    console.log(message);
  }

  function showLoading(show) {
    loadingMessage.style.display = show ? "block" : "none";
  }

  scene.addEventListener("loaded", () => {
    showLoading(false);
    showInfo("Scene loaded - Scan the marker");

    const nftMarker = document.getElementById("nft-marker");
    if (nftMarker) {
      nftMarker.addEventListener("markerFound", () => {
        showInfo("Marker detected");
      });
      nftMarker.addEventListener("markerLost", () => {
        showInfo("Marker lost");
      });
    } else {
      showInfo("NFT Marker element not found");
    }
  });

  window.addEventListener("error", (e) => {
    showInfo("Error: " + (e.message || "Unknown error"));
    console.error(e);
  });

  // AR.js-specific events for debugging
  scene.addEventListener("arjs-nft-loaded", (e) => {
    console.log("NFT marker loaded", e.detail);
  });

  scene.addEventListener("arjs-video-loaded", (e) => {
    console.log("Video device loaded", e.detail);
  });
</script>

`

What I've Tried:

Adjusted the rotation of the (using -90 0 0 so it lies flat). Verified that the marker is being detected (console logs show “Marker detected”). Confirmed that the image URL loads correctly when accessed directly. Ran the scene on a local web server (using Python’s http.server) to avoid local file issues. My NFT Descriptor Folder: I’ve generated my NFT marker descriptor files (fset, iset, etc.) and placed them in the folder assets/all_speakers. (Make sure this folder is correctly referenced relative to your HTML file.)

My Issue: Even though the AR.js NFT system detects the marker, the image never appears on the plane. Instead, I only see the “Marker detected” message and nothing else.

Has anyone encountered a similar issue with image-based AR (NFT tracking) and could offer suggestions or working examples? Any help or debugging tips are greatly appreciated!