3D模型的A帧抖动

Question

我正在尝试使用 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>

当相机离标记较近时，物体抖动（破碎的纹理）会少一些，但当相机远离时（增加标记和相机之间的距离，则抖动会增加，如附件中所示）图片。

当远

更近

远

Answer 1

这背后可能存在一个 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>

3D模型的A帧抖动

A-Frame Jittering Of 3D Model

javascript

web

augmented-reality

aframe

ar.js