Question

我目前正在研究AR.js，我正在使用NFT图像跟踪制作AR网络，但是在a平面上显示a文本时遇到了问题。文字不会显示在飞机的前面，而是显示在飞机的后面

Here is the screenshot

有人可以告诉我如何将文字正确放置在飞机上吗？对不起，我的英语。

这是我的源代码：

<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>
<script src="https://unpkg.com/aframe-text-geometry-component@^0.5.0/dist/aframe-text-geometry-component.min.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;'>
    <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;'>
 <a-nft type='nft' url='./book/markers/agamapelacur' smooth='true' smoothCount='10' smoothTolerance='0.01'
            smoothThreshold='5'>
            <a-plane color="cyan" rotation="-90 0 0" scale="200 275 200" position="50 0 -200" material="transparent: true; opacity: 0.9">
                <a-entity scale="0.19 0.19 0.19" material="transparent: false">
                    <a-text value="Agama Pelacur: Dramaturgi Transendental" anchor="center" align="center" color="red"
                        position="0 2 0.2" transparent: false></a-text>
                    <a-text value="Writers: Prof. Dr. Nur Syam, M.Si" anchor="center" align="left" color="red"
                        position="0 1.3 0.2"></a-text>
                    <a-text value="Sinopsis: lalalallalalalallalalallalalalalalallalallalalalalalalalalalalla"
                        color="red" anchor="center" align="left" position="0 0.75 0.2"></a-text>
                    <a-text value="Available: 5 copies" anchor="center" align="left" color="blue" position="0 -1.5 0.2">
                    </a-text>
                </a-entity>
            </a-plane>
        </a-nft>
<a-entity camera></a-entity>
    </a-scene>
</body>

AR.js NFT图片跟踪未在飞机上显示文本

0 个答案: