Android phone 中未显示 A 框文本

Question

我正在创建一个虚拟游览，我还添加了一个热点，当注视或单击文本时应该会显示该热点。我的问题是文本没有显示，我是运行我的网站在我的 android phone 中。你能检查一下我的代码吗？

我的另一个问题是我的一张等距柱状照片无法显示，即 ID 为 "showroompano" 的图像。这是我的小故障。 https://glitch.com/edit/#!/join/16dc3064-6cd6-499c-993b-1495757a3aac

         var showText = document.querySelector('#hotspotText');
        var textPopover = document.querySelector('#textPopover');
        var gotoAnotherScene = document.querySelector("#sceneHotspot1");
        var scene = document.querySelector("#pano");
        
      
        showText.addEventListener('click', function()
        {

          console.log("show text");
          textPopover.setAttribute('visible', 'true');
          cursor.setAttribute('visible', 'false');

        });
      
        gotoAnotherScene.addEventListener('click', function()
        {
          
          var currScene = scene.getAttribute('src');
          
          if (currScene == "#reception")
            {
              
              console.log("the arrow has clicked");
              scene.setAttribute('src', '#salesroompano');
              gotoAnotherScene.setAttribute('position', '-6 -2 -4');
              gotoAnotherScene.setAttribute('rotation', '-90 45 0');
              showText.setAttribute('visible', 'false');
              
            }
          else if (currScene == "#salesroompano")
            {
                   
              console.log("the arrow has clicked");
              scene.setAttribute('src', '#reception');
              gotoAnotherScene.setAttribute('position', '2 1 4');
              gotoAnotherScene.setAttribute('rotation', '90 30 0');
              showText.setAttribute('visible', 'true');
              
            }
          
        });
      
       function closeText()
        {               
          textPopover.setAttribute('visible', 'false');
          cursor.setAttribute('visible', 'true');
        }

<!DOCTYPE html>
<html>
  <head>
    <title>showroom vr</title>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  </head>
  <body onmousedown="closeText()">
    <a-scene vr-mode-ui="enabled: true">
      <assets>
        <img id="reception" crossorigin="anonymous" src="https://cdn.glitch.com/5874228b-d8b5-4335-9d1b-5e623a35b987%2Freception.jpg?1498790772677">
        <img id="showroompano" crossorigin="anonymous" src="https://cdn.glitch.com/5874228b-d8b5-4335-9d1b-5e623a35b987%2Fshowroom.png?1498795620954">
        <img id="salesroompano" crossorigin="anonymous" src="https://cdn.glitch.com/5874228b-d8b5-4335-9d1b-5e623a35b987%2Fsales.jpg?1498790765222"> 
        <img id="infoIcon" crossorigin="anonymous" src="https://cdn.glitch.com/5874228b-d8b5-4335-9d1b-5e623a35b987%2Finfo.png?1498790716495">
      </assets>
      <a-sky id="pano" radius="10" src="#reception"></a-sky>
      <a-camera wasd-control="false">
        <a-cursor id="cursor" geometry="primitive: circle; radius: 0.03" material="side: double" opacity="0.5" visible="true"></a-cursor>
        <a-entity id="textPopover" geometry="primitive: plane; width: 1.5; height: 0.6" material="color: black" text="value: Engage your viewers with the Showroom 360 Panorama tour. While exploring, viewers can be informed when hotspots were clicked. Hotspots may include the specifications and especially the features of the products through images, texts, video and many more.; width: 1.5; color: #fff" position="0 0 -1" visible="false">
        </a-entity>
      </a-camera>

      <!-- hotspot for text -->
      <a-image id="hotspotText" src="#infoIcon" position="-3 1.5 7" rotation="0 -20 0" visible="true"></a-image>

      <a-image id="sceneHotspot1" src="https://cdn.glitch.com/5874228b-d8b5-4335-9d1b-5e623a35b987%2Farrow.png?1498790627250" position="2 -1 4" rotation="90 30 0" opacity="1" visible="true">
        <a-mouseenter opacity="0.5"></a-mouseenter>
        <a-mouseleave opacity="1"></a-mouseleave>
      </a-image>
    </a-scene>

  </body>
</html>

Answer 1

使用a-frame时不需要添加three.js库，因为它包含核心three.js库。添加 three.js AFTER a-frame 可能会覆盖一些核心 functions/definitions.
我发现 text 属性没有正确呈现，发现你的包含，扔掉了 three.js，现在它按照你的预期工作。

这里是直播fiddle。
我很确定，你的平面+文本在光标前面，所以你不能关闭它。除此之外，它似乎还在工作，你有多个错误日志连接到你的函数。

而且，我去2号房回来的时候，负责换img的箭头位置不对。

Android phone 中未显示 A 框文本

A-frame text is not displaying in Android phone

android

aframe