CODEWITHSUNDEEP
aframewebvr
jesicadev18
jesicadev18

Reputation: 3152

How to create an a-frame menu - webvr

I am using a-frame and I would like to add a menu on the screen to switch scenes or other actions ( for example show a modal with information ). Is there a way I can achieve this ? I have searched and found aframe-ui-modal-component which isn't 100% what I want, but it shows some kind of menu, but using that, I am not being able to make those buttons clickable and fire an action.

Upvotes: 1

Views: 3759

Answers (3)

Irwin
Irwin

Reputation: 12829

There's a tutorial on building a 360 degree gallery using Aframe, https://aframe.io/docs/1.0.0/guides/building-a-360-image-gallery.html. It shows how to specify what to do on-click, which in this case is change an image in the gallery. This is a snippet of the code with the event:

<script id="link" type="text/html">
  <a-entity class="link"
    geometry="primitive: plane; height: 1; width: 1"
    material="shader: flat; src: ${thumb}"
    sound="on: click; src: #click-sound"
    event-set__mouseenter="scale: 1.2 1.2 1"
    event-set__mouseleave="scale: 1 1 1"
    event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"></a-entity>
</script>

If you want to do more than handle a click in this way, you can also implement your own custom component, following the guidance here: https://aframe.io/docs/1.0.0/introduction/interactions-and-controllers.html

Upvotes: 1

WilliamRADFunk
WilliamRADFunk

Reputation: 11

There isn't a direct way of accomplishing a typical javascript event listener from a mouse click because that is based off of 2D space (x and y screen coordinates), where WebVR is dealing with 3D space, and therefore requires raycasting to determine where you are pointing in 3D space.

That's not to say there isn't an indirect way. I will give the shortest (and less feature-rich) solutions first, and then the more complicated one at the end.

There is a mouse cursor library here: https://www.npmjs.com/package/aframe-mouse-cursor-component

This allows you to register three mouse events: click, mouseenter, and mouseleave. This draws a raycaster from camera to mouse pointer and extrapolates which object you are pointing at.

If you wanted to use the VR view cursor, there is: https://aframe.io/docs/0.2.0/components/cursor.html

Here you can register the hover and click events from what you are looking at.

Whichever of these input devices you want to use to interact with your menu, mouse or view cursor, respectively. Now onto the menu itself.

As miauz pointed out, you can create planes and attach the event listeners to them using javascript now that you've included a tool to pick up on them for you. If you are new to event listeners, you can find a tutorial here:

http://www.w3schools.com/jsref/met_document_addeventlistener.asp

Text on your planes:

https://www.npmjs.com/package/aframe-bmfont-text-component

Now you have the 3rd-party libraries to translate your typical 2D events into your 3D environment and the events to use on your plane objects (buttons) included in your menu.

Complicated way: You can use raycasters yourself.

https://aframe.io/docs/0.2.0/components/raycaster.html

This is more in-depth and requires more lines of code, but you can accomplish more with them if you get proficient enough. For example, here you could get all the objects along a line extending from your camera, whereas the simpler solutions further above only give you the closest.

I hope this helps. Good luck!

Upvotes: 1

miauz
miauz

Reputation: 46

You can use plane entities or curvedimages to display a menu. With Javascript you are able to make those buttons clickable:

document.querySelector('#menu1');.addEventListener('click', function() {
model.setAttribute('visible','true'); 
}

Upvotes: 1

Related Questions