A-Frame дрожание 3D-модели - PullRequest
Новая
       51

A-Frame дрожание 3D-модели

0 голосов
/ 24 января 2019

Я пытаюсь дополнить модель автомобиля с помощью шаблона hiro, но есть дрожание. 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>augmented reality</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- A FRAME -->
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js" crossorigin="anonymous"></script>
  <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.4/dist/aframe-extras.min.js" crossorigin="anonymous"></script>
  <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
  <!-- import events.js script -->
  <script src="https://rawgit.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/events.js"></script>
  <!-- import the webpage's stylesheet -->
  <link rel="stylesheet" href="/style.css">

  <!-- import the webpage's javascript file -->
  <script src="/script.js" defer></script>
</head>

<body>


  <a-scene shadow="type: pcfsoft" embedded arjs='sourceType: webcam; debugUIEnabled: false;' debug>

    <a-marker preset="hiro">
      <a-entity shadow="cast: true" gltf-model="https://cdn.glitch.com/0d1945ac-ed6f-44be-9903-e1c1626575a4%2Fcar.glb?1548349423434" position="0 0 0" crossOrigin="anonymous" response-type="arraybuffer" rotation="0 0 0" scale="0.05 0.05 0.05">
      </a-entity>
    </a-marker>
    <a-entity light="type: ambient; color: #CCC"></a-entity>
    <a-entity camera></a-entity>

  </a-scene>

  <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
  <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
  <script src="https://button.glitch.me/button.js"></script>
</body>

</html>

Когда камера ближе к маркеру, чем объект, дрожит (разбитые текстуры) немного меньше, но когда камера далеко (увеличьте расстояние между маркероми камера затем дрожание увеличивается, как на приложенных изображениях.

Когда далеко
When Far

Ближе
Closer

Дальний
far roung 2 feet

1 Ответ

0 голосов
/ 10 февраля 2019

Существует ошибка AR.js, которая может быть за этим: https://github.com/jeromeetienne/AR.js/issues/410

Один из способов - добавить этот код до </body>: 

<script>
// Workaround for an AR.js bug (https://github.com/jeromeetienne/AR.js/issues/410)
const sceneEl = document.querySelector('a-scene');
sceneEl.addEventListener('loaded', () => {
    sceneEl.camera = new THREE.PerspectiveCamera();
});
</script>
...