Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

glTF model not loading on image based project #617

Open
anuj9196 opened this issue Nov 19, 2024 · 3 comments
Open

glTF model not loading on image based project #617

anuj9196 opened this issue Nov 19, 2024 · 3 comments
Labels
nft question Further information is requested

Comments

@anuj9196
Copy link

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
Copy link
Member

kalwalt commented Nov 19, 2024

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.

@kalwalt kalwalt added question Further information is requested nft labels Nov 19, 2024
@anuj-scanova
Copy link

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 webvr-polyfill default DPDB json domain is expired 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.

@anuj9196
Copy link
Author

anuj9196 commented Nov 20, 2024 •
edited
Loading

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
nft question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kalwalt @anuj9196 @anuj-scanova