A型框框是一个链接

问题描述

我想知道如何在 A-frame (aframe.io) 中将一个框变成一个链接。我有链接结构和盒子结构，但我希望盒子变成一个链接。关于如何实现这一目标的任何想法？

解决方法

a-frame 的 link 组件使用 window.location 更改网站，您可以在自定义组件中执行相同操作：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  // component declaration
  AFRAME.registerComponent("mylink",{
    // define a url in the schema
    schema: {
      href: {}
    },init: function() {
      // when clicked - change the location:
      this.el.addEventListener("click",(e) => {
        window.location = this.data.href;
      })
    }
  })
</script>

<a-scene cursor="rayOrigin: mouse">
  <a-box position="0 1 -2" color="blue" mylink="href: https://aframe.io/;"></a-box>
</a-scene>

如果您愿意，您还可以抓住锚点 (a) 元素并执行 `anchorElement.click();` 而不是更改 `window.location`。 ,

我有一个网站，可以用二十面体链接到网站的其他部分（忽略荒谬的组件数量，我是从站点代码复制粘贴的）

<script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-text-geometry-component@0.5.1/dist/aframe-text-geometry-component.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@^4.0.0/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-debug-cursor-component/dist/aframe-debug-cursor-component.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v4.0.1/dist/aframe-physics-system.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>

<a-scene>
<a-entity
          link="href: personal.html; title: Personal Projects"
          geometry="primitive: icosahedron; depth: 0.5; height: 0.5; width: 0.5; skipCache: false; segmentsHeight: 1; segmentsWidth: 1; segmentsDepth: 1"
          material="color: #ff6600"
          animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"
          animation__mouseleave="property: components.material.material.color; type: color; to: #ff6600; startEvents: mouseleave; dur: 500"
        ></a-entity>
</a-scene>

这是 A-Frame 1.0.3，所以我不确定它是否适用于新版本。

aframe html virtual-reality