Search code examples
3daugmented-realityaframegltfar.js

ar.js 3d model doesn't show up

I've just started learning to create AR scenes with AR.js and I'm having some trouble with loading custom 3D models. I've tried many examples and all of them work perfectly, but once I insert my own model, it just doesn't show up. I used almost the same exact code for the given example and for my 3D model, which is this one:

<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs>
      <a-marker preset="hiro">
        <a-entity
          position="0 0 0"
          <!-- example given in AR.js docs -->
          <!-- scale="0.05 0.05 0.05"
          gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
          -->
          <!-- my 3D model -->
          scale="0.05 0.05 0.5"
          gltf-model="model/scene.gltf"
        ></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

My page structure:

.
|_ index.html
|_ model
   |_ scene.gltf
   |_ scene.bin

My model:

https://sketchfab.com/3d-models/coronavirus-covid-19-virus-991102145c294fe4b633faecc23f3799

I've tried many other models, other formats (.dae, .obj, .fbx), changing the scale of the model and nothing seems to work. What could be the problem?

Solution

  • The model won't show up because of two factors:

    1. The model is huge and off - centered. Scaling it by 0.01 moves it a bit towards the center.

    If your model shows up in Dons gltf-viewer - always try out your model in vanilla a-frame - at least in a fiddle. Its easy to inspect, debug, and you can be sure whether a-frame is causing the trouble.

    1. Glitch assets is not a folder. It may look this way for our convenience, but it's just a bunch of links. So scene.gltf is searching for scene.bin in its current directory (edit and search the gltf file - its human readable), but it's not there.

    Replacing the paths with glitch urls is a bad idea (usually there are way more paths than just the .bin). You should push the model into a github repository, where the directories work as expected.

    Working arjs glitch here.