图像跟踪AR.js的3D模型问题?

时间:2020-05-25 14:01:49

标签: javascript ar.js

我制作了一个具有图像跟踪功能的网站,但是出了点问题。我的服务器上的模型无法加载。我将在下面提供代码。该模型完全正常,路径正确,并且启用了ssl证书以使用https。我需要你的帮助。

<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8 />

    <meta name="Access-Control-Allow-Origin" content="*" />
    <meta name="Access-Control-Allow-Headers" content="*" />

</head>
<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, 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: true;"
>
    <!-- we use cors proxy to avoid cross-origin problems -->
    <a-nft
            type="nft"
            url="https://24alpaca.ru/goblet/three_bulls_cut"
            smooth="true"
            smoothCount="10"
            smoothTolerance=".01"
            smoothThreshold="5"
    >
        <a-entity gltf-model="https://arjs-cors-proxy.herokuapp.com/https://24alpaca.ru/goblet/scene.gltf" scale="5 5 5" position="100 -250 0" rotation="260 0 0">
        </a-entity>
<!--        <a-entity-->
<!--                position="0 0 0"-->
<!--                scale="2 2 2"-->
<!--                gltf-model="https://arjs-cors-proxy.herokuapp.com/https://24alpaca.ru/goblet/scene.gltf"-->
<!--        >-->
<!--        </a-entity>-->
    </a-nft>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

0 个答案:

没有答案