Image Tracking not working

DarkHorseReborn commented 3 years ago

Do you want to request a feature or report a bug? Bug

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce. I'm following this tutorial https://ar-js-org.github.io/AR.js-Docs/image-tracking/ Basically I copy the code from the tutorial and paste into my html and replacing by the custom gltf and trex files. It seems to me not working.

NIL

The live example of image tracking is not working and always stuck at the loading... Please mention other relevant information such as the browser version, Operating System and Device Name Iphone 12 , Safari What is the expected behavior? Expecting able to track my business card and display the 3d model If this is a feature request, what is motivation or use case for changing the behavior? NIL

DarkHorseReborn commented 3 years ago

<!-- import aframe and then ar.js with image tracking / location based features -->
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

<!-- style for the loader -->
<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin : 0px; overflow: hidden;">
  <!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>

  <!-- a-frame scene -->
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- a-nft is the anchor that defines an Image Tracking entity -->
    <!-- on 'url' use the path to the Image Descriptors created before. -->
    <!-- the path should end with the name without the extension e.g. if file is 'pinball.fset' the path should end with 'pinball' -->
    <a-nft
      type="nft"
      url="./resource/BusinessCard"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
        <!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity -->
        <a-entity
            gltf-model="./3dmodel/scene.gltf"
            scale="5 5 5"
            position="50 150 0"
        >
        </a-entity>
    </a-nft>
    <!-- static camera that moves according to the device movemenents -->
    <a-entity camera></a-entity>
  </a-scene>
</body>

DarkHorseReborn commented 3 years ago

Do anyone manage to create a image tracking project by following the tutorial documentation?

hermionewy commented 3 years ago

Hey! I'm hoping to create a WebAR experience for a freelancing project with AR.js. I tried to use the link provided by the readme and it shows that it could not load.

kalwalt commented 3 years ago

@DarkHorseReborn look at the message console: what do you read? This is not a bug, you need to give the right path to the gltf model.

DarkHorseReborn commented 3 years ago

@kalwalt erm..sound weird cause that's where I put my 3d model file..but thanks for your comment I will retry again with the tutorial doc. Can the sample code work in IIS? Previously I have tried to host the sample code it doesn't work.

hermionewy commented 3 years ago

@DarkHorseReborn look at the message console: what do you read? This is not a bug, you need to give the right path to the gltf model.

The console shows "Error in loading marker on Worker 404". I tried to scan the marker but it just shows "loading, please wait"

maxiar commented 3 years ago

Hi I've the same issue, I see in the console this error: Error in loading marker on Worker 404

I'm using your Image Tracking T-Rex Sample: https://ar-js-org.github.io/AR.js/aframe/examples/image-tracking/nft/ I'm using a Iphone 12 + Safari

I've another test in my github account and do some changes in the marker url but nothing work: My Code: https://github.com/maxiar/AR-JSo3pnzk/tree/gh-pages The Test Url: https://maxiar.github.io/AR-JSo3pnzk/

mechpil0t commented 3 years ago

i also get the "Error in loading marker on Worker 404" on the image tracker example page

Ebeleh commented 3 years ago

https://stackoverflow.com/questions/61078518/image-tracking-using-ar-js-problem-with-custom-image-descriptors

gi4no commented 3 years ago

it's just an error path.

AR-js-org / AR.js

Image Tracking not working #260