1. Zuhause
  2. Frage und Antwort
  3. aFrame.io Erstellen von Hyperlinks und Download-Links

aFrame.io Erstellen von Hyperlinks und Download-Links

2016-04-08 9 views
5

Hallo Ich habe gerade angefangen mit A-Frame.io und finde die Website sehr nützlich. Es gibt jedoch keine Dokumentation darüber, wie eine Verknüpfung funktioniert, wenn ich ein Objekt betrachte.aFrame.io Erstellen von Hyperlinks und Download-Links

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

in dem obigen Beispiel, wenn Sie das Absehen über den Würfel schweben die mittlere Maustaste es seine Form ändert.

Gibt es eine Möglichkeit, eine Webverbindung zu aktivieren, wenn dieser Cube ausgelöst wird.

<!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>

Quelle

2016-04-08 Raj Kaul

Antwort

4

Sie können einen Ereignis-Listener hinzufügen oder eine Link-Komponente schreiben.

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

Komponente:

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

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

`` `

Quelle

2016-04-10 01:25:06 ngokevin

1

ich ein aframe-href-component Plugin wickeln. Sie können das Attribut href in einem beliebigen a-frame-Objekt hinzufügen, um es mit einer URL zu verknüpfen. Oder Sie können href="#id" verwenden, um auf andere Objekte mit dieser ID zu fokussieren.

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

Quelle

2016-04-30 14:41:28 gasolin

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>

Quelle

2017-04-26 23:50:26

+0

Ich versuche, nicht Komponenten zu verwenden, es sei denn ich sie selbst schreiben. Im Grunde nur .js Add-Ins statt. –

Verwandte Themen

 Verwandte Themen