GLTF 不使用 ar.js 显示答案

【问题标题】：GLTF not displaying using ar.jsGLTF 不使用 ar.js 显示
【发布时间】：2020-06-08 13:00:01
【问题描述】：

我目前正在测试 AR.js 以使用手机在增强现实中显示 3D 模型。我的网络编码技能非常新手，所以我正在整理不同的教程来获得我想要的东西。我相信我刚刚确定了正确显示 gltf 文件所需的内容，但似乎存在一些小问题，因为模型不会显示（我已经确认它是使用 gltf 查看器的有效文件）。该代码也可以很好地显示一个简单的 a-box，但是一旦我将其注释掉并添加 gltf 模型的行，它就会掉下来。

任何帮助将不胜感激！

<html>
    <head>
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
         <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
         <script src="https://raw.githack.com/jeromeetienne/AR.js/2.2.1/aframe/build/aframe-ar.js"></script>
    </head>

    <body style='margin : 0px; overflow: hidden;'>
        <a-scene embedded arjs='sourceType: webcam; debugUIEnabled: true;'>

            <a-marker preset="hiro">
            <!--<a-box position='0 0.5 0' material='color: yellow;'></a-box>-->
            <a-entity gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
    </body>
 </html>

【问题讨论】：

标签： aframe gltf ar.js

【解决方案1】：

您可以浏览新的AR.js docs，这里有一个带有online live version 的gltf 模型的示例。在您提供的示例中，您应该进行此更改

从此：

<a-entity
 gltf-model="url(https://tests.offtopicproductions.com/ywca.gltf)"></a-entity>

到：

<a-entity gltf-model="https://arjs-cors-proxy.herokuapp.com/https://tests.offtopicproductions.com/ywca.gltf"></a-entity>

你应该添加：

https://arjs-cors-proxy.herokuapp.com/

在资源不在同一主机时避免 CORS 问题。 AR.js 位于一个新的 github org https://github.com/AR-js-org 下，所有资源（库和文档）现在都在这里。

【讨论】：