Search code examples
javascriptwebaframewebvr

how to create quickmenu in aframe using javascript

I am trying to create a quick menu where if the user clicks the center plane's around it increase in scale from 0 to 1 and the center plane is replaced by a back button now when user clicks back button the planes disappear I tried it with events but it is not working

https://glitch.com/~sugar-zephyr [here is the link to glich page for my code][1]

Solution

  • You're firing the event on document and entities in a-scene won't receive it. DOM events bubble up and document is at the top. Fire the event directly on the planes:

    var center=document.querySelector('#center');
var quickmenuopen=false;
center.addEventListener('click',e=>{
  var planes = document.querySelectorAll('a-plane');
  var eventName = "closemenu";
  if(quickmenuopen){
    eventName = "openmenu";
  }
  var event= new CustomEvent(eventName);
  for (var i = 0; i < planes.length; ++i) {
    planes[i].dispatchEvent(event);
  }
})

    Corrected glitch: https://glitch.com/edit/#!/abiding-titanium?path=index.html:68:4