如何使用 AR.js 和 A-Frame 在 <a-plane> 上覆盖文本？答案

【问题标题】：How do I overlay text on top of a <a-plane> with AR.js and A-Frame?如何使用 AR.js 和 A-Frame 在 <a-plane> 上覆盖文本？
【发布时间】：2019-09-24 03:14:59
【问题描述】：

我在一个带有 AR.js 和 A-Frame 的 webAR 项目中，我试图在平面或盒子上覆盖文本，起初我以为文本在平面后面，但在我给平面的不透明度 0.5 之后，我意识到文本并没有真正与两者相交的平面共存。我做错了什么？

感谢任何帮助！

Preview

我的代码：

<script src="js/aframe-0.9.0.min.js"></script>
<script src="js/aframe-ar-1.7.1.min.js"></script>

  <a-scene vr-mode-ui="enabled: false" embedded arjs='debugUIEnabled:false; sourceType:webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3; cameraParametersUrl: camera_para.dat; maxDetectionRate: 10;' renderer="logarithmicDepthBuffer: true; precision: high;">

    <a-assets>

        <a-mixin id="text"
            text="align: center; width: 3;
            font: https://cdn.aframe.io/fonts/Aileron-Semibold.fnt;
            value: Some text.">
        </a-mixin>

    </a-assets>

    <a-marker type="barcode" value="51" smooth="true" smoothCount="10" smoothTolerance="0.005" smoothThreshold="1">
        <a-plane rotation="-90 0 0" position="0 0 0" material="opacity: 0.7" color="red"></a-plane>
        <a-text mixin="text" position="0 1 0" wrap-count="15" rotation="-90 0 0" color="blue"></a-text>
    </a-marker>

<a-light type="ambient" color="#fff"></a-light>
<a-light type="directional" color="#fff" intensity="0.3" position="-0.5 1 1"></a-light>

<a-entity camera></a-entity>

【问题讨论】：

标签： aframe ar.js

【解决方案1】：

平面和文本都具有相同的 z 位置 (0)。将其中一个更改为具有不同（大于或小于 0）的 z 属性。您想找出相机的位置（以 z 为单位）。您可以使用检查器执行此操作（控制 alt I）。如果相机为正 z，则将文本位置设为正数。如果相机为负 z，则将文本 pos 设为负数。那么他们就不会在同一个平面上，也不会“z-fighting”。

【讨论】：