topical media & game development

talk show tell print

mobile-query-three-vendor-threex.dragpancontrols.js / js



  
@namespace

  
  var THREEx        = THREEx                 || {};
  
  THREEx.DragPanControls        = function(object, domElement)
  {
          this._object        = object;
          this._domElement= domElement || document;
  
          // parameters that you can change after initialisation
          this.target        = new THREE.Vector3(0, 0, 0);
          this.speedX        = 0.03;
          this.speedY        = 0.03;
          this.rangeX        = -40;
          this.rangeY        = +40;
  
          // private variables
          this._mouseX        = 0;
          this._mouseY        = 0;
  
          var _this        = this;
          this._onMouseMove        = function(){ _this._onMouseMove.apply(_this, arguments); };
          this._onTouchStart        = function(){ _this._onTouchStart.apply(_this, arguments); };
          this._onTouchMove        = function(){ _this._onTouchMove.apply(_this, arguments); };
  
          this._domElement.addEventListener( 'mousemove', this._onMouseMove, false );
          this._domElement.addEventListener( 'touchstart', this._onTouchStart,false );
          this._domElement.addEventListener( 'touchmove', this._onTouchMove, false );
  }
  
  THREEx.DragPanControls.prototype.destroy        = function()
  {
          this._domElement.removeEventListener( 'mousemove', this._onMouseMove, false );
          this._domElement.removeEventListener( 'touchstart', this._onTouchStart,false );
          this._domElement.removeEventListener( 'touchmove', this._onTouchMove, false );
  }
  
  THREEx.DragPanControls.prototype.update        = function()
  {
          this._object.position.x += ( this._mouseX * this.rangeX - this._object.position.x ) * this.speedX;
          this._object.position.y += ( this._mouseY * this.rangeY - this._object.position.y ) * this.speedY;
          this._object.lookAt( this.target );
  }
  
  THREEx.DragPanControls.prototype._onMouseMove        = function(event)
  {
          this._mouseX        = ( event.clientX / window.innerWidth ) - 0.5;
          this._mouseY        = ( event.clientY / window.innerHeight) - 0.5;
  }
  
  THREEx.DragPanControls.prototype._onTouchStart        = function(event)
  {
          if( event.touches.length != 1 )        return;
  
          // no preventDefault to get click event on ios
  
          this._mouseX        = ( event.touches[ 0 ].pageX / window.innerWidth ) - 0.5;
          this._mouseY        = ( event.touches[ 0 ].pageY / window.innerHeight) - 0.5;
  }
  
  THREEx.DragPanControls.prototype._onTouchMove        = function(event)
  {
          if( event.touches.length != 1 )        return;
  
          event.preventDefault();
  
          this._mouseX        = ( event.touches[ 0 ].pageX / window.innerWidth ) - 0.5;
          this._mouseY        = ( event.touches[ 0 ].pageY / window.innerHeight) - 0.5;
  }
  
  


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