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プラグインをラップします。hrefa-frame オブジェクトに属性を追加して、URL にリンクできます。href="#id"または、その ID を持つ他のオブジェクトにフォーカスするために使用できます。

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

于 2016-04-30T14:41:28.933 に答える
0

2016 年 12 月現在、VR にとどまる WebVR リンクのことを意味する場合、これはまだ実験段階です。

今のところ、FAQ 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 に答える