在 AR.js 中显示到标记的距离

Question

I'm trying to display the distance to text markers (underneath the markers) in AR.js;我正在尝试在 AR.js 中显示到文本标记（在标记下方）的距离； according to the docs, distanceMsg is a custom attribute from gps-entity-place , so I thought it could be retrieved with getAttribute and then set with setAttribute , but I'm having no success;根据文档， distanceMsg是来自gps-entity-place的自定义属性，所以我认为可以使用getAttribute检索它，然后使用setAttribute设置，但我没有成功； besides, I'm just beginning to learn JS.此外，我刚刚开始学习JS。

The following code produces a text marker with the word "null":以下代码生成带有单词“null”的文本标记：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
        <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.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://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
    <script>

   window.onload = () => {
    const distanceMsg = document.querySelector('[gps-entity-place]').getAttribute('distanceMsg');
    document.querySelector('a-text').setAttribute('value', distanceMsg);
    };
      </script>    </head>

    <body style="margin: 0; overflow: hidden;">
        <a-scene
            renderer="logarithmicDepthBuffer: true;"
            embedded
            loading-screen="enabled: false;"
            arjs="sourceType: webcam; debugUIEnabled: false;"
        >
         <a-text
        look-at="[gps-camera]"
            scale="50 50 50"
            gps-entity-place="latitude: 18.45030; longitude: -96.96152;"
              ></a-text> 
            <a-entity 
        text="value: place1;"
            look-at="[gps-camera]"
                scale="35 35 35"
                gps-entity-place="latitude: 18.45045; longitude: -96.96160;"
                ></a-entity>

            <a-camera gps-camera rotation-reader></a-camera>
        </a-scene>
    </body>
</html>

Answer 1

Not a complete answer, but hopefully helps with several syntax aspects of your code - see inline comments below.不是一个完整的答案，但希望对您的代码的几个语法方面有所帮助 - 请参阅下面的内联注释。 Note that the distanceMsg attribute is added dynamically by AR.js (I don't know how to kick that off) So if you ask for a non-existent attribute you get null back.请注意，distanceMsg 属性是由 AR.js 动态添加的（我不知道如何启动它）所以如果你要求一个不存在的属性，你会得到 null 回来。 In the corrected example below I just set it to a fixed string for now.在下面的更正示例中，我现在只是将其设置为固定字符串。

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
            <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.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://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
        <script>
    
       window.onload = () => {
        var n = document.querySelector('a-text'); // <-- find first node of that type
        console.log(n);
        n.flushToDOM();  // debug aid: this will show the AFrame attribute values
        console.log(n);  // by default they are not written back to DOM because expensive
        var distanceMsg = n.getAttribute('distanceMsg'); // <-- returns null, so for show
        distanceMsg = "so far away"; // just use something else
        n.setAttribute('value', distanceMsg); // <-- this is how you change the text to display
        };
          </script>   
          
           </head>
    
        <body style="margin: 0; overflow: hidden;">
            <a-scene
                renderer="logarithmicDepthBuffer: true;"
                embedded
                loading-screen="enabled: false;"
                arjs="sourceType: webcam; debugUIEnabled: false;"
            >
             <a-text
                look-at="[gps-camera]"
                scale="50 50 50"
                gps-entity-place="latitude: 18.45030; longitude: -96.96152;"
                value= "place1"  // <--- this is how you set up the text to display
            ></a-text> 
    
                <a-camera gps-camera rotation-reader></a-camera>
            </a-scene>
        </body>
    </html>

在 AR.js 中显示到标记的距离

问题描述

1 个解决方案

解决方案1
1 2021-05-30 00:53:29

在 AR.js 中显示到标记的距离

问题描述

1 个解决方案

解决方案1 1 2021-05-30 00:53:29

解决方案1
1 2021-05-30 00:53:29