How do I make the gltf model show at the right lat loon, using a-frame/ar.js?

91 views Asked by At

I'm learning htlm to create a AR experience, but i know very little about everything. I'm using Glitch to code and test.

I managed to code a basic location-based ar experience, but very simple with the primitive objects, like the a-box.

i am trying to put other things instead of a yellow box, so I'm using the same html, but adding the a-assets to import my model,

I cant find where i am getting it wrong, because it doesnt show up anywhere.

Thats my code, if someone can see what i am not. btw remember that's on Glitch, so if you want to remix to help https://codinggabe-testing-a-frame.glitch.me/

<!DOCTYPE html>
<html>
  <head>
    <title>AR.js A-Frame Location-based</title>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script
      type="text/javascript"
      src="https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-threex-location-only.js"
    ></script>
    <script
      type="text/javascript"
      src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"
    ></script>
  </head>
  <body>
    <a-scene
      vr-mode-ui="enabled: false"
      arjs="sourceType: webcam; videoTexture: false; debugUIEnabled: false"
      renderer="antialias: true; alpha: true"
    >
      <a-assets>
        <a-asset-item
          id="pokemon"
          src="https://cdn.glitch.global/d73945cc-0fef-4a52-b298-daaefd92b8f3/scene.gltf?v=1680276219908"
        >
        </a-asset-item>
      </a-assets>
      <a-camera
        id="camera1"
        look-controls-enabled="false"
        arjs-device-orientation-controls="smoothingFactor: 0.1"
        gps-new-camera="gpsMinDistance: 5"
      >
      </a-camera>
      <a-entity
        gltf-model="#pokemon"
        scale="1 1 1"
        rotation="0 0 0"
        position="0 0 0"
        gps-new-entity-place="latitude:41.14844671941156; longitude:-8.613534113861592"
        animation-mixer
      >
      </a-entity>
    </a-scene>
  </body>
</html>

0

There are 0 answers