topical media & game development

talk show tell print

mobile-query-three-vendor-threex-examples-threex.domevent-vendor-threex-THREEx.WindowResize.js / js



  // This THREEx helper makes it easy to handle window resize.
  // It will update renderer and camera when window is resized.
  //
  // # Usage
  //
  // **Step 1**: Start updating renderer and camera
  //
  // ```var windowResize = THREEx.WindowResize(aRenderer, aCamera)```
  //    
  // **Step 2**: Start updating renderer and camera
  //
  // ```windowResize.stop()```
  // # Code
  
  //
  
  
@namespace

  
  var THREEx        = THREEx                 || {};
  
  
Update renderer and camera when the window is resized
parameter: {Object} renderer the renderer to update
parameter: {Object} Camera the camera to update

  
  THREEx.WindowResize        = function(renderer, camera){
          var callback        = function(){
                  // notify the renderer of the size change
                  renderer.setSize( window.innerWidth, window.innerHeight );
                  // update the camera
                  camera.aspect        = window.innerWidth / window.innerHeight;
                  camera.updateProjectionMatrix();
          }
          // bind the resize event
          window.addEventListener('resize', callback, false);
          // return .stop() the function to stop watching window resize
          return {
                  
Stop watching window resize

  
                  stop        : function(){
                          window.removeEventListener('resize', callback);
                  }
          };
  }
  
  THREEx.WindowResize.bind        = function(renderer, camera){
          return THREEx.WindowResize(renderer, camera);
  }
  


(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.