aFrame.ioハイパーリンクの作成とリンクのダウンロード

こんにちは、私はA-Frame.ioを使い始めました。しかし、私がオブジェクトを見ると、リンクを作る方法に関するドキュメントはありません。あなたはそれが形を変え、マウスの中央ボタンを使用して、キューブの上にレチクルを置く場合は、上記の例ではaFrame.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>

出典

2016-04-08 Raj Kaul

イベントリスナーを追加したり、リンクコンポーネントを書き込んだりすることができます。

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-10 01:25:06 ngokevin

私はaframe-href-componentプラグインを包みます。任意のAフレームオブジェクトにhref属性を追加して、URLにリンクすることができます。または、href="#id"を使用して、そのIDを持つ他のオブジェクトにフォーカスすることができます。

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

出典

2016-04-30 14:41:28 gasolin

あなたはVRであなたを保つWebVRリンクを意味するならば、2016年12月のとして、これはまだ実験段階です。

今のところ、FirefoxのNightlyを使用した実例を提供している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/を参照してください。

出典

2016-12-21 14:05:44 Utopiah

<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-26 23:50:26

私は自分で書くのでない限り、コンポーネントを使用しないようにしています。基本的には.jsアドインが代わりに使用されます。 –

aFrame.ioハイパーリンクの作成とリンクのダウンロード

答えて

関連する問題