hide and show HUD

[stephanschulz]

I am working off the CameraStates example. What do i have to do to hide or show the text and screenshot HUD overlays? Unfortunately i am not super experienced with css and html to know how to set the hide/show from JS.

Thanks a bunch.

[jwdunn1]

Depending on the element ID for the HUD overlay, it can be toggled on/off using one of the following: document.getElementById('easycamhud').style.display ='block'; // to display document.getElementById('easycamhud').style.display ='none'; // to hide

To demonstrate this, I've updated the CameraStates example. Pressing key 'h' hides the HUD. Press key 's' to show. Note: the "Frame count" portion is rendered on the canvas and that could easily be toggled also.

[stephanschulz]

Thanks so much for adding to the example. It is very helpful to me.

Since i am using your example in combination with dat.GUI, i added this code to toggle the HUD drawing via key 'h', which dat.GUI listens to.

  if(key == 'h'){
    // console.log("datGui.hide ",datGui.domElement.style.display);
    if(datGui.domElement.style.display === ''){
      document.getElementById('easycamhud').style.display ='block'; // hide HUD
      document.getElementById('statehud').style.display ='block';
    }
    else {
      document.getElementById('easycamhud').style.display ='none'; // display HUD
      document.getElementById('statehud').style.display ='none'; 
    }
  }

[jwdunn1]

Awesome!