Question

您好我刚开始使用A-Frame.io并且发现该网站非常有用。但是，如果我查看对象，则没有关于如何使链接工作的文档。

https://aframe.io/examples/showcase/cursor/

在上面的例子中，如果使用鼠标中键将光标悬停在立方体上，它会改变形状。

当触发该多维数据集时，是否有办法使Web链接正常工作。

<!DOCTYPE html>
<html>
   <head>
<meta charset="utf-8">
<title>Cursor</title>
<meta name="description" content="Cursor — A-Frame">
<script src="../../dist/aframe.js"></script>
 </head>
 <body>
<a-scene>
  <a-entity position="0 1.8 4">
    <a-camera id="camera">
      <a-cursor color="#4CC3D9"></a-cursor>
    </a-camera>
  </a-entity>

  <a-box id="orange-cube" position="0 3.5 -2" rotation="30 30 0" width="2" depth="2" height="2" color="#F16745" roughness="0.8">
    <a-event name="mouseenter" scale="3 1 1" color="#FFC65D"></a-event>
    <a-event name="mouseenter" target="#shadow" scale="3 2 2"></a-event>
    <a-event name="mouseleave" scale="1 1 1" color="#F16745"></a-event>
    <a-event name="mouseleave" target="#shadow" scale="2 2 2"></a-event>
  </a-box>

  <a-image id="shadow" position="0 0 -2" src="../_images/radial-shadow-2.png" opacity="0.5" rotation="-90 0 0" scale="2 2 2"></a-image>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>
 </body>
</html>

Answer 1

您可以添加事件侦听器，也可以编写链接组件。

el.addEventListener('click', function () {
  window.location.href = 'https://google.com';
});

组件：

AFRAME.registerComponent('link', {
  schema: {default: ''},

  init: function () {
    var url = this.data;
    this.el.addEventListener('click', function () {
      window.location.href = url;
    });
  }
});

```

Answer 2

我打包了一个aframe-href-component插件。您可以在任何a-frame对象中添加href属性以链接到url。或者您可以使用href="#id"关注具有该ID的其他对象。

https://gasolin.github.io/aframe-href-component/

Answer 3

如果您指的是让您保持VR的WebVR链接，那么截至2016年12月，这仍然是实验性的。

现在请参阅常见问题解答cf https://aframe.io/docs/0.4.0/introduction/faq.html#can-i-add-links-to-my-scene或博文https://blog.mozvr.com/connecting-virtual-worlds-hyperlinks-in-webvr/，提供使用Firefox Nightly的工作示例。

Answer 4

<html>
<head>
<meta name="description" content="A-Frame href">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<script>
  AFRAME.registerComponent('link', {
  schema: {default: ''},

  init: function () {
    var url = this.data;
    this.el.addEventListener('click', function () {
    window.location.href = url;
 });
}

}）;

</head>
<body>
<a-scene>

<a-camera position="-1 0 7" look-controls wasd-controls>
 <a-cursor color="blue" fuse="true" timeout="2"></a-cursor>
</a-camera>

<a-light type="ambient" color="#fff"></a-light>
<a-light type="hemisphere" groundColor="#ddd;" color="#fff" intensity="1.0" position="0 10 5" ></a-light>

<a-text position="0 2 2" color="#fff" align="center" value="WASD Keys moves you on desktop.\n\nMove circle mouse pointer to red ball and wait a few seconds." width="4"></a-text>
</a-box>
</a-entity>
<a-sphere color="red" radius="1" position="-4 2 0" link="http://cablecenter.org"></a-sphere>
  <a-plane color="black" rotation="-90 0 0" width="30" height="30"></a-plane>
  <a-sky color="#111"></a-sky>
 </a-scene>

</body>
</html>

aFrame.io创建超链接和下载链接

4 个答案: