如何从 A-Frame 实体链接 html 文件？答案

【问题标题】：How to link a html file from A-Frame entity?如何从 A-Frame 实体链接 html 文件？
【发布时间】：2022-01-23 06:15:06
【问题描述】：

单击<a-entity> 时，我正在尝试加载 HTML 文件，但它不适用于传统的 HTML 方法。（使用 href）请看下面的代码。

<a-scene>
    <a-assets>
      <a-asset-item id="mBot" src="../assets/robot1.glb"></a-asset-item>
      <img id="panorama" src="../assets/stock.jpg" />
    </a-assets>

    <!-- Robot -->
    <a-entity
      gltf-model="#mBot"
      scale="4 4 4"
      position="0 1 2"
      id="mBot-1"
    >
      <a-animation attribute="rotation" to="0 360 0" repeat="indefinite" >
      </a-animation>
    </a-entity>


    <!-- Robot -->
    <a-entity
      gltf-model="#mBot"
      scale="4 4 4"
      position="8 1 2"
      id="mBot-2"
    >
      <a-animation attribute="rotation" to="0 -360 0 " repeat="indefinite">
      </a-animation>
    </a-entity>



    <a-entity position="4 0 8">
      <a-camera></a-camera>
    </a-entity>

    <a-sky src="#panorama"></a-sky>
  </a-scene>

单击实体 id=mBot-1 和 mBot-2 时，我想加载两个单独的 html 文件。
非常感谢任何帮助解决这个问题。

【问题讨论】：

1) 查看this thread，有一个带有链接的示例。 2）在大多数情况下加载“本地”html文件你需要一个本地服务器，或者使用文件协议：file:///path_to_file.html（thread）
使用了第一个线程中提到的 JS，感谢您的提示！

标签： javascript html jquery augmented-reality aframe

【解决方案1】：

通常，您可以向元素添加点击处理程序。

但是，不清楚您所说的“加载 HTML 文件”是什么意思。您是指点击该页面的链接吗？

您也没有指定该文件的 URL。这是一个使用 stackoverflow.com 作为“HTML 文件”的示例

    var entities = document.querySelectorAll('A-ENTITY');
    var entity;
    for (var i = 1; i < entities.length; i++) {
        entity = entities[i];
        entity.addEventListener('click', function() {
            window.location.href = "https://stackoverflow.com";
        });
    }

【讨论】：

【解决方案2】：

这个问题可以通过自己的js链接来解决。

创建您自己的元素，这将在点击时更改 window.location：

    AFRAME.registerComponent("mylink", {
  init: function() {
    this.el.addEventListener("click", (e)=> {
       window.location = this.data.href;
    })
  }
})

HTML

<a-text color="black" position="1 1 -2" value="goToSchatzkin" 
    mylink="href: https://schatzkin.com;"></a-text>

最终代码

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("mylink", {
    init: function() {
      this.el.addEventListener("click", (e) => {
        window.location = this.data.href;
      })
    }
  })
</script>

<a-scene cursor="rayOrigin: mouse">
  <a-text color="black" position="1 1.6 -2" value="Click the text"
          mylink="href: https://schatzkin.com;"></a-text>
  <a-entity position="-1 1.6 -2" 
            link="highlighted: true; 
                  highlightedColor:#000000; backgroundColor: red; 
                  href: https://schatzkin.com; titleColor: black; 
                  title: click the image below.;
                  image: https://i.imgur.com/wjobVTN.jpg;
                  visualAspectEnabled: true"></a-entity>
</a-scene>

【讨论】：