CODEWITHSUNDEEP
javascripthtmlthree.jsaframear.js
abhishek ranjan
abhishek ranjan

Reputation: 652

Objects are Losing/Changing shape when used with Ar.js

I am just starting with Ar.js. I have a problem where the objects appearing on screen have lost their shapes a bit. First I have this simple A-Frame example which shows a sphere which is perfectly round:

<!DOCTYPE>
<html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere>
    </a-scene>
  </body>
</html>

But when I use this following code of Ar.js, the same sphere looks like a oval now:

<!doctype html>
<html>

<head>
    <link rel="canonical" href="https://inspiredlabs.github.io/ar.js/markerless.html" />
    <!-- location based aframe v0.9.2 -->
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script><!-- debug -->
    <script>
    const log = console.log;
    window.onload = () => {
      let scene = document.querySelector('a-scene'); /* Apply to whole scene */

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
          let gps = document.createAttribute('gps-entity-place'),
            arjs = document.createAttribute('arjs'),
            
          arjs.value = 'sourceType: webcam; sourceWidth: 640; sourceHeight: 480; trackingMethod: best; debugUIEnabled: false;';
          gps.value = `latitude: ${position.coords.latitude}; longitude: ${position.coords.longitude}`;
          log(gps.value);

          scene.setAttributeNode(gps); /* Apply to whole scene */
          scene.setAttributeNode(arjs);

        });
      }

    };



  </script>
</head>
<a-scene device-orientation-permission-ui="enabled: true" vr-mode-ui="enabled: false">
    <a-entity id="wrapper" position="0 -4 -5 " look-at="[camera]">

        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>

    </a-entity><!-- /wrapper -->    

    <a-camera camera="fov: 60;" gps-camera rotation-reader></a-camera>
</a-scene>
</body>
</html>

I am having trouble figuring it out. Can anyone help me out here please?

Upvotes: 0

Views: 443

Answers (1)

St&#233;phane Albanese
St&#233;phane Albanese

Reputation: 560

Your sphere is perfectly fine. Shapes get distorted when they're close to the screen edges due to the perspective of the camera but that's absolutely normal. If you retry your first example, get further from the sphere and move it somewhere in a corner you'll see the same distortion you see in the second example. It will seem more natural with a background sky cause the whole view will get distorted in the corners. Nothing to worry about anyway!

Upvotes: 1

Related Questions