Trouble displaying custom 3D model in AR.JS NFT scanning

NFT
1

Hey everyone, I’m having a weird issue with AR.JS. I’ve set up NFT scanning and it’s working fine. The NFT gets detected and a box shows up when I scan it. But here’s the problem: my custom 3D model (a cute little avocado) isn’t visible at all. It’s like it’s there, moving with the NFT, but invisible. I’ve double-checked all the paths, made sure the scripts are loaded, and even played around with the size and rotation. Still no luck. Here’s a snippet of my code:

<a-assets>
  <a-asset-item id="guac" src="/models/GuacamoleModel.glb"></a-asset-item>
</a-assets>

<a-nft type="nft" url="/nfts/qr-pattern" smooth="true" smoothCount="10" smoothTolerance=".01" smoothThreshold="5">
  <a-entity scale="50 50 50">
    <a-entity
      position="0 0 0"
      gltf-model="#guac"
      scale="10 10 10"
      rotation="-30 75 0"
      id="guac-model"
    ></a-entity>
    <a-sphere position="0 0.25 0" material="opacity: 0.5;" radius="0.25"></a-sphere>
  </a-entity>
</a-nft>
<a-entity camera></a-entity>

Any ideas what might be causing this? I’m totally stumped!

2

I’ve encountered similar issues with AR.JS before. One thing to check is if your model is properly centered at its origin point. If it’s offset, it might be rendering outside the camera’s view. You can try adjusting the position of your model entity to compensate:

<a-entity
  position="0 -1 -2"
  gltf-model="#guac"
  scale="10 10 10"
  rotation="-30 75 0"
  id="guac-model"
></a-entity>

Also, ensure your model’s file format is fully compatible with AR.JS. Sometimes, converting the model to a different format (like .gltf) can resolve visibility issues. Lastly, double-check that your model doesn’t have any transparency settings that might be interfering with its visibility in AR.

3

yo pixstar, have u checked ur model’s material properties? sometimes default materials don’t play nice with AR lighting. try adding a basic material to ur model:

this might make it visible. if not, maybe the model’s too complex? try a simpler one to test. good luck!

4

hey there pixstar54! i’ve run into similar issues before with ar.js and invisible 3d models. have you tried adjusting the lighting in your scene? sometimes models can be there but not visible if the lighting isn’t set up right. you could try adding an ambient light or directional light to see if that helps:

<a-scene>
  <a-light type="ambient" color="#ffffff" intensity="0.5"></a-light>
  <a-light type="directional" color="#ffffff" intensity="0.8" position="-1 1 2"></a-light>
  <!-- rest of your scene code -->
</a-scene>

also, are you sure the model is properly scaled? sometimes if it’s too big or too small it might not show up as expected. you could try playing around with the scale values on your entity.

one other thing - have you checked if the model loads correctly in a regular a-frame scene without ar? that could help narrow down if it’s an issue with the model itself or something specific to the ar setup.

let me know if any of that helps! ar can be tricky sometimes but we’ll figure it out :slight_smile: