Custom 3D model invisible in AR.JS NFT tracking despite successful detection

NFT
1

I’m working with AR.JS and having trouble getting my 3D model to display properly. The NFT tracking works fine and I can see that detection is happening correctly. There’s a test box that shows up when I scan the marker, so the tracking part is definitely working.

The weird thing is that my custom 3D asset seems to be there but completely invisible. I can tell it’s moving along with the NFT marker but I just can’t see the actual model.

<a-assets>
  <a-asset-item id="banana" src="%BASE_URL%models/3d/Banana.glb"></a-asset-item>
</a-assets>

<a-nft
  type="nft"
  url="%BASE_URL%markers/nft/test-pattern"
  smooth="true"
  smoothCount="8"
  smoothTolerance=".02"
  smoothThreshold="3"
>
  <a-entity scale="80 80 80">
    <a-entity
      position="0 0 0"
      gltf-model="#banana"
      scale="15 15 15"
      rotation="-30 45 0"
      id="banana-model"
    ></a-entity>
    <a-box position="0 0.3 0" material="opacity: 0.4;" scale="0.4 0.4 0.4"></a-box>
  </a-entity>
</a-nft>
<a-entity camera id="main-camera"></a-entity>

I’ve double checked all the file paths and they’re correct. All the required AR.JS scripts are loaded properly. I’ve tried adjusting the scale values and rotation angles but still no luck getting the model to appear.

2

I encountered a similar problem with GLB models in AR.JS not displaying correctly. It often stems from the materials or lighting settings used in the model. First, open your Banana.glb in a three.js or online GLB viewer to check if it has visible materials; sometimes models export with transparent materials that can be problematic in AR.JS. Additionally, consider adding some ambient lighting to your scene, as AR.JS doesn’t always render materials well in low-light conditions. Lastly, be cautious of your scaling; if you scale both the parent entity and the model excessively, it may lead to rendering problems. Simplifying the scaling may resolve your visibility issue.

3

check if your model has proper normals facing outward - sometimes models get exported with flipped normals making them invisible from the outside. also try removing one of those scale transforms, you’re scaling twice which might be causing issues. had same problem last month with my gltf model.

4

hmm this is intresting - have you tried checking the console for any error messages when the model loads? sometimes ar.js throws warnings about gltf models that can give clues about whats going wrong.

also curious about your marker setup - what size is your nft marker image and how are you holding it relative to the camera? i’ve noticed that some models only become visible at certain distances or angles, especially when theres heavy scaling involved like in your case.

one thing that helped me debug similar issues was temporarily adding a simple colored material to see if the geometry is actually there:

<a-entity
  position="0 0 0"
  gltf-model="#banana"
  material="color: red;"
  scale="15 15 15"
  rotation="-30 45 0"
  id="banana-model"
></a-entity>

if you can see a red shape then you know the model geometry is loading but theres an issue with the original materials. if you still see nothing, then its probably a scaling or positioning problem.

what happens if you try with a much smaller scale first, like scale=“1 1 1” on both entities? curious to see if that makes any difference for you.