admin管理员组文章数量:1399949
Hello I have just started using A-Frame.io and am finding the website very useful. However there is no documentation on how to make a link work if i look at an object.
/
in the example above if you hover the reticle over the cube using the middle mouse button it changes shape.
Is there a way to make a web link work when that cube is triggered.
<!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>
Hello I have just started using A-Frame.io and am finding the website very useful. However there is no documentation on how to make a link work if i look at an object.
https://aframe.io/examples/showcase/cursor/
in the example above if you hover the reticle over the cube using the middle mouse button it changes shape.
Is there a way to make a web link work when that cube is triggered.
<!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 Answers
Reset to default 4You can add an event listener, or write a link ponent.
el.addEventListener('click', function () {
window.location.href = 'https://google.';
});
Component:
AFRAME.registerComponent('link', {
schema: {default: ''},
init: function () {
var url = this.data;
this.el.addEventListener('click', function () {
window.location.href = url;
});
}
});
```
I wrap a aframe-href-ponent plugin. You can add href attribute in any a-frame object to link to a url. Or you can use href="#id" to focus on other object with that id.
https://gasolin.github.io/aframe-href-ponent/
If you mean WebVR links that keeps you in VR then as of December 2016 this is still experimental.
For now please refer to 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./connecting-virtual-worlds-hyperlinks-in-webvr/ providing a working example using Firefox Nightly.
<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"></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>
本文标签： javascriptaFrameio creating hyperlinks and download linksStack Overflow
版权声明：本文标题：javascript - aFrame.io creating hyperlinks and download links - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744241830a2596825.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论