3D模型的A帧抖动答案

【问题标题】：A-Frame Jittering Of 3D Model3D模型的A帧抖动
【发布时间】：2019-06-18 12:43:46
【问题描述】：

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

当相机离标记较近时，物体抖动（纹理破损）会少一点，但是当相机离得很远时（增加标记和相机之间的距离，抖动就会增加，就像附加图像中一样。

当远

更接近

远

【问题讨论】：

请在故障中编辑我的代码并修复问题
这些似乎是基于标记的跟踪的局限性。我认为这不是实施问题。
[ar] 标签指的是 Unix 存档实用程序，而不是增强现实。

标签： javascript web augmented-reality aframe ar.js

【解决方案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>

【讨论】：

它工作但有任何标准的方式来实现.......并且在 A-Frame 0.9.2 中它不支持并且 Aframe Inspect (Alt+Alt+I) 在之后也被阻止使用这个