Trouble displaying image or video with NFT marker in AR.JS

NFT
1

I’m stuck trying to get AR.JS to show a video or PNG image with an NFT marker. Oddly enough, it works fine with 3D GLTF models. I’ve tried adjusting the scale and position, thinking the content might be hidden behind the marker, but no luck. The console isn’t showing any errors either.

Here’s a simplified version of my code for the image:

<a-scene embedded arjs="trackingMethod: best; sourceType: webcam;">
  <a-nft type="nft" url="path/to/marker_image">
    <a-entity>
      <a-image src="path/to/image.png"
               scale="3 3 3"
               position="50 50 0"
               crossorigin>
      </a-image>
    </a-entity>
  </a-nft>
  <a-entity camera></a-entity>
</a-scene>

I’ve tried various tweaks, but nothing seems to work. The image just won’t show up. Any ideas on what might be causing this or how to fix it? I’m really puzzled since the 3D models work without a hitch.

2

hey ethan, that’s a tricky one! i’ve run into similar issues before with ar.js and images. have you tried adjusting the rotation of the image? sometimes the default orientation can be wonky. maybe try adding rotation=‘0 180 0’ to your a-image tag?

also, silly question, but have you double-checked that the image file path is correct? i once spent hours debugging only to realize i had a typo in my file name :sweat_smile:

one other thing - what size is your image file? if it’s really large, it might not be loading properly. you could try resizing it to something smaller like 1024x1024 pixels.

let me know if any of that helps! ar can be so finicky sometimes. what kind of image are you trying to display anyway? sounds like an interesting project!

3

Have you tried adjusting the image rendering settings? Sometimes AR.JS can be finicky with 2D content. I’d suggest experimenting with the ‘renderOrder’ attribute on your a-image element. Set it to a high value like 9999 to ensure it renders on top of other elements.

Also, double-check your image file format. AR.JS sometimes has issues with certain PNG compressions. Try converting your image to a different format like JPG or WebP to see if that resolves the issue.

Lastly, consider adding a basic material to your a-image. Something like material=‘opacity: 1’ can sometimes force the renderer to acknowledge the image when it’s being stubborn.

If none of these work, you might want to try using a-plane with a material instead of a-image. It’s a bit more verbose, but it can be more reliable in some cases.

4

yo ethan, had similar probs. try tweakin the scale - maybe go smaller like ‘0.5 0.5 0.5’. also, position=‘0 0 0.1’ could help. double-check ur image path and file size too. if nothin works, try loggin some debug info to see whats goin on. good luck man!