This paper presents some pre-visualization design methods for volumetric user interfaces and experiences within the larger scope of a virtual reality operating system.
Category: Not categorised
A-Frame – a-cursor without click
The below example shows using a-cursor with no click event, but with mouseenter & moveleave events, which will show/hide a text (“HELLO WORLD!”) hovering over a box.
Please notice, that it is necessary to add a link to a JavaScript library containing the text component, and that the component only works with A-Frame releases from 0.4.0 and below!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<html> <head> <title>Demo a-cursor with no click</title> <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script> <script src="https://rawgit.com/bryik/aframe-bmfont-text-component/master/ dist/aframe-bmfont-text-component.min.js"></script> </head> <body> <a-scene> <a-assets> </a-assets> <a-box color="blue" width="1" height="1" position="0 10 0" rotation="0 0 0" scale="1 2.5 1"> </a-box> <a-entity scale="2 2 2" bmfont-text="text: HELLO WORLD!; color:white; size: 1.5; height: 0.5; opacity:0" position="-0.27 9.28 0.91"></a-entity> <a-camera position="0 7 5"> <a-cursor color="#FF0000" /> </a-camera> </a-scene> <script type="text/javascript"> var box = document.querySelector( 'a-box'); var text = document.querySelector( 'a-entity'); box.addEventListener( "mouseenter", function () { text.setAttribute("bmfont-text", { opacity: 1 }); }); box.addEventListener( "mouseleave", function () { text.setAttribute("bmfont-text", { opacity: 0 }); }); </script> </body> </html> |