All geek questions in one place

AFrame.io creates hyperlinks and download links

Hello, I just started using A-Frame.io and found the site very useful. However, there is no documentation on how to make a link if I look at an object.

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

in the above example, if you move the grid over the cube using the middle mouse button, it changes shape.

Is there a way to make the web link work when this cube is launched.

<!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>
+5
source share
4 answers

You can add an event listener or write a link component.

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

component:

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

`` ``

+4
source

I am wrapping an aframe-href-component plugin. You can add the href attribute to any a-frame object to reference the url. Or you can use href="#id" to focus on another object with this id.

https://gasolin.imtqy.com/aframe-href-component/

+1
source

If you mean the WebVR links that keep you in VR, then as of December 2016 this is still experimental.

For the moment, see the FAQ cf https://aframe.io/docs/0.4.0/introduction/faq.html#can-i-add-links-to-my-scene or the blog post https: // blog. mozvr.com/connecting-virtual-worlds-hyperlinks-in-webvr/ , providing a working example using Firefox Nightly.

0
source 
 <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>
0
source

Source: https://habr.com/ru/post/1246699/

More articles:


All Articles