更改 AR.js 的图像网址和 3D 模型

如何解决更改 AR.js 的图像网址和 3D 模型

所以我决定将 AR 添加到我拥有的移动应用源代码中，但我没有更改我的移动应用源代码来执行此操作，而是在网上找到了一个允许我使用浏览器 AR.js 的项目。

添加测试代码工作正常，但是当我尝试添加我自己的图像 URL 或 3D 模型时它停止工作，所以我想知道是否有人可以通过告诉我我应该如何使用图像 URL（我我认为我做得对）和 3D 模型，测试 url 非常复杂，我将其更改为一个简单的 url，来自我上传新模型的网站。

错误是加载的 url 停留在“正在加载，请稍候”文本中。当它确实通过它时什么也没有发生。

这是原始测试源代码。

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>

<body style="margin : 0px; overflow: hidden;">
  <!-- minimal loader shown until image descriptors are loaded -->
  <div class="arjs-loader">
    <div>Loading,please wait...</div>
  </div>
  <a-scene
    vr-mode-ui="enabled: false;"
    renderer="logarithmicDepthBuffer: true;"
    embedded
    arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
  >
    <!-- we use cors proxy to avoid cross-origin problems -->
    <a-nft
      type="nft"
      url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-entity
        gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
        scale="5 5 5"
        position="50 150 0"
      >
      </a-entity>
    </a-nft>
    <a-entity camera></a-entity>
  </a-scene>
</body>

然后我的代码我只是更新了图像 url 以及 3D 模型 url。

    <a-nft
      type="nft"
      url="https://arjs-cors-proxy.herokuapp.com/https://mobileappstarter.com/AR/image/trees"
      smooth="true"
      smoothCount="10"
      smoothTolerance=".01"
      smoothThreshold="5"
    >
      <a-entity
        gltf-model="https://arjs-cors-proxy.herokuapp.com/https://mobileappstarter.com/AR/3D/adamHead/adamHead.gltf"
        scale="5 5 5"
        position="50 50 50"
      >
      </a-entity>
    </a-nft>

这是我上传文件以打开相机加载 AR 的地方。 https://mobileappstarter.com/AR

任何帮助将不胜感激。

解决方法

因此对此进行了大量研究，我找到了一个简单的解决方法，希望我早点知道。

AR.js 有一个简单易懂的 doc 和 git 页面，但如果有任何机会你像我一样仍然有问题，这里有一个很大的在线收费https://ar-js-org.github.io/studio/这个漂亮的工具将帮助你创建标记并上传您要编辑的媒体。

完成后只需下载源代码或直接上传到 github。

希望这会有所帮助！