AR-js-org/AR.js

glTF model not loading on image based project

Opened this issue · 3 comments

anuj9196 commented

Using AR.js to create a project based on AR. I created an image and uploaded the glTF model to the S3 bucket with the following code

<head>
  <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>

<body class="bg-gray-100">
  
  <main class="main-content mt-0">
  
    <a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true;"
      embedded
      arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
    >
      <a-nft
        type="nft"
        url="https://tapxreality-media.s3.amazonaws.com/media/uploads/422909c0-b46d-45e2-9692-8020b8324a58/2024/11/20241119_727783_360F197116416_ojyEaPu"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5"
        markerhandler
      >
        <a-entity
          gltf-model="https://tapxreality-media.s3.ap-south-1.amazonaws.com/media/uploads/422909c0-b46d-45e2-9692-8020b8324a58/2024/11/3d/trex/scene.gltf"
          scale="5 5 5"
          position="150 300 -100"
        >
        </a-entity>
      </a-nft>
    
      <a-entity camera></a-entity>
    </a-scene>
  </main>
</body>

When the image is scanned, the marker is found but the glTF content is not loading.

How to test it?

The application can be tested on https://tpxr.in/lgqd

Here is the image to scan

enter image description here

Additional Details

The browser console has no error, and the glTF file is accessible in other applications and viewers.

enter image description here

kalwalt commented

Hi @anuj9196 i tested your app, the model is loaded and the image can be tracked. I suggest to grow the scale factor int e <a-entity> starting with 10 10 10 and so on until it will be shown. One other issue it could be wrong the position setting, try with these and let me know.

anuj-scanova commented

I tried Image tracking example of trex and few things I should bring to your notice

  1. The example is using version 1.3.0 of aframe which has the following issue aframevr/aframe#5538 because of which the marker is not detecting.
  2. I changed to aframe version 1.6.0 after which the marker is found but the trex model is not loading.

NOTE: I have copy pasted the trex example code and have uploaded the trex files to my own server.

A working example with latest aframe will be helpful.

  • 👍1
anuj9196 commented

@kalwalt I tried reducing the position value

<a-entity
    gltf-model='https://tapxreality-media.s3.ap-south-1.amazonaws.com/media/uploads/422909c0-b46d-45e2-9692-8020b8324a58/2024/11/3d/trex/scene.gltf'
    scale="5 5 5"
    position="0.01 0.01 0.01"
>
</a-entity>

But the model is still not showing.
I see there is a PR containing an upgrade of three.js and frame #615, if it can help.

Also, after the marker is found and the glTF models take time to load, is there a way to listen to this event and show a spinner unless the model is loaded?