topical media & game development

talk show tell print

mobile-query-three-vendor-threex-examples-threex.fullscreen.htm / htm



  <html>
  <body>
          <h1>threex.fullscreen.js demo</h1>
          <a href="https://github.com/jeromeetienne/threex">threex.js</a> - helpers for three.js
          <hr/>
          <!-- DOM declaration -->
          <span class="available">fullscreen available ? <span class="value"></span></span>
          <br/>
          <span class="activated">fullscreen activated ? <span class="value"></span></span>
          <br/>
          <button class="button request">request fullscreen</button>
          <br/>
          <button class="button cancel">cancel fullscreen</button>
  
          <script src="../threex.fullscreen.js"></script>
  
          <script>
                  document.querySelector(".available .value").innerHTML        = THREEx.FullScreen.available() ? "yes" : "no";
                  document.querySelector(".activated .value").innerHTML        = THREEx.FullScreen.activated() ? "yes" : "no";
  
                  THREEx.FullScreen.bindKey({
                          dblclick        : true
                  });
                  
                  document.querySelector(".button.request").addEventListener('click', function(){
                          THREEx.FullScreen.request();
                          document.querySelector(".activated .value").innerHTML        = THREEx.FullScreen.activated() ? "yes" : "no";
                  }, false);
  
                  document.querySelector(".button.cancel").addEventListener('click', function(){
                          THREEx.FullScreen.cancel();
                          document.querySelector(".activated .value").innerHTML        = THREEx.FullScreen.activated() ? "yes" : "no";
                  }, false);
          </script>
  </body>
  </html>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.