Custom 3D model not visible when scanning NFT in AR.JS scene

NFT
1

Help! My 3D model isn’t showing up in my AR.JS project.

I’ve set up an AR scene using AR.JS and a custom NFT marker. The marker gets detected fine, and I can see a placeholder box appear. But my 3D model (a cute little avocado) is invisible. It seems to be there because it moves with the marker, but I just can’t see it.

Here’s a simplified version of my code:

<a-assets>
  <a-asset-item id="guacamole" src="models/AvocadoFriend.glb"></a-asset-item>
</a-assets>

<a-nft type="nft" url="nfts/my-cool-marker">
  <a-entity scale="50 50 50">
    <a-entity
      gltf-model="#guacamole"
      scale="10 10 10"
      rotation="-30 75 15"
    ></a-entity>
    <a-sphere radius="0.25" color="green"></a-sphere>
  </a-entity>
</a-nft>

<a-entity camera></a-entity>

I’ve double-checked all my file paths and made sure the scripts are loaded correctly. I’ve played around with the scale, position, and rotation, but no luck. Any ideas on why my avocado is being shy and not showing up?

2

yo nina, had similar probs. try adding a basic light to ur scene:

also check if ur model’s too big/small. try messing with scale like:

hope this helps! lmk if ur avocado shows up :avocado:

3

I’ve encountered similar issues with invisible models in AR.JS before. One often overlooked aspect is the model’s material properties. Sometimes, the default material settings don’t play well with AR environments. Try adjusting the material of your avocado model to make it more visible. You can do this by adding a simple material component to your entity:

<a-entity
  gltf-model="#guacamole"
  scale="10 10 10"
  rotation="-30 75 15"
  material="shader: flat; color: #228B22"
></a-entity>

This applies a flat shader with a green color, which might help your avocado show up. If that works, you can then fine-tune the material properties to match your intended look.

Also, ensure your camera is positioned correctly. Sometimes, the model is there but the camera isn’t looking at it. Try adjusting your camera position or adding a look-controls component to allow manual viewing adjustments during testing.

4

hey nina! i’ve been there with invisible models before, it’s so frustrating :tired_face: have you tried adding some lighting to your scene? sometimes models can be there but totally dark. try throwing in a simple directional light like this:

<a-entity light="type: directional; color: #FFF; intensity: 1" position="0 1 1"></a-entity>

also, double check that your model file is actually loading. open your browser console and look for any 404 errors when it tries to grab the glb file.

ooh another thing - what if you try a super simple model first, like a basic cube from the a-frame examples? that might help narrow down if it’s a model issue or something else.

let us know if any of that helps! i’m curious to see your avocado friend when you get it working :avocado: