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

NFT
1

I’m stuck with AR.JS and can’t get a video or PNG image to show up with an NFT marker. Oddly enough, GLTF models work fine. I’ve tried adjusting the scale and position, thinking it might be hidden behind the marker, but no luck.

The weird part is, there are no errors in the console. I’m at my wit’s end here.

Here’s a snippet of my code for the image:

<a-nft
  type="nft"
  url="assets/custom_marker"
  smooth="true"
  smoothCount="10"
  smoothTolerance=".01"
  smoothThreshold="5">
  <a-entity>
    <a-image src="assets/custom_image.png"
      scale="5 5 5"
      position="100 100 0"
      crossorigin
    ></a-image>
  </a-entity>
</a-nft>

Any ideas on what I’m doing wrong? I’d really appreciate a quick fix or some pointers. Thanks!

2

hey nina, i had a similar issue. try using smaller values for scale and position. like maybe scale=‘0.5 0.5 0.5’ and position=‘0 0 0’. also, check if ur image file is actually in the assets folder. sometimes it’s a simple file path problem. good luck!

3

hey there nina! i’ve been playing around with ar.js too and ran into some funky issues. have you tried messing with the renderer settings? sometimes that can make a difference. like, add this to your scene tag:

renderer=‘antialias: true; alpha: true; precision: mediump;’

also, just a thought - maybe try a different image format? i’ve had better luck with jpg files for some reason. dunno why, but it’s worth a shot!

oh, and one more thing - are you testing this on a secure (https) server? ar.js can be picky about that. if you’re just running it locally, try using a simple python server or something.

let us know if any of this helps! ar stuff can be so finicky sometimes, right? :upside_down_face:

4

I’ve encountered similar issues with AR.JS before. One thing to check is your asset paths. Make sure they’re correct relative to your HTML file. Also, try reducing the scale and position values drastically. AR.JS can be sensitive to large numbers.

Another potential fix: add rotation=‘270 0 0’ to your a-image entity. Sometimes the default orientation isn’t what you expect.

If that doesn’t work, consider using a-plane instead of a-image. It’s more versatile for textures:

Lastly, double-check your NFT marker. Poor contrast or complex patterns can cause detection issues. Hope this helps!