three.jsaugmented-realityaframear.js

Model cant find camera rotation


Im doing a project with AR.JS/Aframe. The project worked but recently all models that were displayed correctly are shown static on one place. IDK if this happend because of a libary update. Can someone tell me whats going on?

Imports:

  <head>
    <title>Demo</title>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <script src='https://aframe.io/releases/0.9.2/aframe.min.js'></script>
    <script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
    <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
    <script>
        THREEx.ArToolkitContext.baseURL = 'https://raw.githack.com/jeromeetienne/ar.js/master/three.js/'
    </script>
    <script src="https://rawgit.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/events.js"></script>
  </head>

Creating the model (This worked and hasnt been changed):

     let scene = document.querySelector('a-scene');
     let model = document.createElement('a-entity');

     model.setAttribute('position', '0 -1 -10');
     model.setAttribute('rotation', '10 0 0');
     model.setAttribute('gltf-model', `url(${data_url})`);
     scene.appendChild(model);          

The a-scene:

  <a-scene
      sceneviewer
      vr-mode-ui="enabled: false"
      embedded
      arjs='sourceType: webcam; sourceWidth:1280; sourceHeight:960; 
      displayWidth: 1280; displayHeight: 960; debugUIEnabled: false;'>
          <a-camera gps-camera rotation-reader></a-camera>
  </a-scene>

enter image description here


Solution

  • Refresh the page after granting accesss to camera and mobile movement was the solution.