search

AR-js-org / AR.js

Image tracking, Location Based AR, Marker tracking. All on the Web.
MIT License
5.47k stars 932 forks source link

glTF model not loading on image based project #617

Open anuj9196 opened 1 day ago

anuj9196 commented 1 day ago

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 1 day ago

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 23 hours ago

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 https://github.com/aframevr/aframe/issues/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.

anuj9196 commented 14 hours ago

@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 https://github.com/AR-js-org/AR.js/pull/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?