3D-объект искажается при переходе от портрета к пейзажу в ар. js - PullRequest
Новая
       109

3D-объект искажается при переходе от портрета к пейзажу в ар. js

1 голос
/ 09 июля 2020

Я начинаю с Ar. js и при повороте устройства из портретного в альбомный режим показываемая мной на экране 3д модель искажается. Здесь - пример этого.

Плюс скриншот, объясняющий то же самое. screenshot.

I am targeting two things:

  1. The object should not distort while rotation.

  2. The object should rotate with the device such that it look attached to the screen. Something like this .

Может Кто-нибудь поможет мне, пожалуйста? Мы будем очень признательны.

Вот мой код: 

<!doctype html>
<html>

<head>
    
    <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'),
            welcome = document.getElementById('welcome');
            
            welcome.setAttribute('value', 'welcome ');
            welcome.setAttribute('scale', '2 2 2');
            welcome.setAttribute('color', '#000000');
            welcome.setAttribute('gps-entity-place', `latitude: ${28.705756}; longitude: ${77.122515}`);


          arjs.value = 'sourceType: webcam; sourceWidth: 640; sourceHeight: 480; trackingMethod: best; debugUIEnabled: false;';
          gps.value = `latitude: ${28.705756}; longitude: ${77.122515}`;
          log(gps.value);


          var entityEl = document.createElement('a-entity');
          entityEl.setAttribute('gltf-model', 'https://www.zamit.one/location/Duck/Duck.gltf');
          entityEl.setAttribute('gps-entity-place', `latitude: ${position.coords.latitude - 0.001}; longitude: ${position.coords.longitude - 0.001}`);
          entityEl.setAttribute('scale', `4 4 4`);
          entityEl.setAttribute('look-at', '[camera]');
          entityEl.setAttribute('rotation', '0 90 0');

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


        });
      }

    };


  </script>
</head>

<a-scene device-orientation-permission-ui="enabled: true" vr-mode-ui="enabled: false">

        <a-text id="welcome" ></a-text>

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

EDIT

Я добавил встроенный атрибут в сцену и сделал следующие изменения в коде ниже:

In Html

<code><pre id="info">

In Js

const aframebox = document.getElementsByClassName('aframebox')[0];
setInterval(function(){
    var w = window.innerWidth;
    var h = window.innerHeight;
    document.getElementById("info").innerHTML = JSON.stringify(w+'::'+h);
    if (typeof aframebox !== 'undefined') {
       aframebox.style.height = h;
       aframebox.style.width = w;
   }
},1)

In Css

  #info {
            display: block;
            position: relative;
            margin: 0px auto;
            width: 50%;
            padding: 10px;
            border: none;
            border-radius: 3px;
            font-size: 12px;
            text-align: center;
            color: #222;
            opacity: 1;

        }

Теперь 3D-объект не искажается, но экран обрезается вверху, как показано на изображении ниже:

ничего

...