Trouble displaying image or video with AR.JS NFT marker

NFT
1

I’m having a hard time with AR.JS. I can’t get it to show a video or PNG image over an NFT marker. It works fine with 3D models though. I’ve tried adjusting the scale and position, but nothing seems to work. The console isn’t displaying any errors.

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="4 4 4"
               position="50 50 0"
               crossorigin>
      </a-image>
    </a-entity>
  </a-nft>
  <a-entity camera></a-entity>
</a-scene>

I’ve tried a range of different adjustments, but the image still won’t appear. Does anyone have any ideas or solutions that might fix this issue?

2

I’ve encountered similar issues with AR.JS and image display. One potential solution is to adjust the scale and position values. Try reducing the scale to something like ‘1 1 1’ and setting the position closer to ‘0 0 0’. These values can be fine-tuned based on your specific setup.

Another aspect to consider is the image format. AR.JS sometimes has trouble with certain file types. Ensure your PNG is properly optimized and consider converting it to a JPG to see if that resolves the issue.

Lastly, check if your server is properly configured to serve the image files. Cross-origin resource sharing (CORS) issues can prevent images from loading, even if the console doesn’t show errors. You might need to adjust your server settings or host the images on a CORS-enabled service.

If these suggestions don’t work, you might want to try a different AR library or consult the AR.JS documentation for any known limitations with image display.

3

hey lee_books, i get it. try swapping a-image for a-plane and scaling it down. sometimes huge imgs or misaligned markers kill it. hope that sorts it out!

4

hey there Lee_Books! i’ve been tinkering with AR.JS too and ran into similar issues. have you tried adjusting the rotation of your image? sometimes the default orientation can be wonky. maybe try adding rotation=“-90 0 0” to your a-image tag?

also, just curious - what kinda image are you trying to display? is it like a logo or somethin more complex? sometimes the complexity of the image can affect how well it renders.

oh, and one other thing - have you double-checked that your image path is correct? i spent hours debugging once only to realize i had a typo in my file path :sweat_smile:

let me know if any of that helps! AR can be tricky but it’s so cool when you get it working!