GLTF不使用ar.js显示

问题描述 投票:0回答:1

我目前正在测试AR.js,以使用手机在增强现实中显示3D模型。我的Web编码技能是新手,因此我整理了不同的教程来获得所需的知识。我相信我已经确定了正确显示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个回答
0
投票

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

来自此:

<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组织https://github.com/AR-js-org下,所有资源(库和文档)都在这里。

© www.soinside.com 2019 - 2024. All rights reserved.