6

您好，我刚刚开始使用 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>
4

4 回答 4

4

你可以添加一个事件监听器，或者编写一个链接组件。

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;
    });
  }
});

```

于 2016-04-10T01:25:06.867 回答
1

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

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

于 2016-04-30T14:41:28.933 回答
0

如果您的意思是让您保持在 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 的工作示例。

于 2016-12-21T14:05:44.140 回答
0 
<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>
于 2017-04-26T23:50:26.783 回答