title: three.js: camera changes position, but it doesn't show
body: <p>I have a program where camera.position.[x|y|z] changes according to mouse position. This is verified by this console output:</p>
  
  <p><img src="https://i.stack.imgur.com/QMiLz.png" alt="enter image description here"></p>
  
  <p>However, the rendering of the object at which the camera is looking, doesn't change. It stands still, as can be seen here:</p>
  
  <p><a href="https://dl.dropbox.com/u/2070405/stackoverflow2/index.html" rel="nofollow noreferrer">https://dl.dropbox.com/u/2070405/stackoverflow2/index.html</a></p>
  
  <p>How do I best approach debugging such behavior?</p>
  
  <p>The program consists of index.html, js/main.js, js/myLibs/dragPanControls.js*, js/require.js, js/libs/three.js/build/three.js</p>
  
  <p>This is main.js:</p>
  
  <pre><code>// CONFIGURE require.js BEFORE LOADING MODULES:
  
  requirejs.config({
      shim: {
          'libs/three.js/build/three': {
              deps: [],
              exports: 'three' //'three' will not be accessible, but any values that three.js writes to the global object will become available to me if I import 'three'.
              /*init: function () {
                  // if I want 'three' to actually refer to something, I can do so by returning whatever I want it to refer to, in this init function
                  console.log("init three. Is THREE available? ", THREE);
                  return this;
              }*/
          }
      }
  });
  
  
  // NOW START LOADING MODULES:
  
  require(["myLibs/dragPanControls", "libs/three.js/build/three", "myLibs/testlib"], function(DPC, three, testlib) {
      console.log("Function call called after all modules are loaded and accessible");
  
  
  // HELLO WORLD EXAMPLE:
  
      var camera, scene, renderer;
      var geometry, material, mesh;
  
      init();
      animate();
  
      function init() {
  
          camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
          camera.position.z = 1000;
  
          scene = new THREE.Scene();
  
          geometry = new THREE.CubeGeometry(200, 200, 200);
          material = new THREE.MeshBasicMaterial({
              color: 0xff0000,
              wireframe: true
          });
  
          mesh = new THREE.Mesh(geometry, material);
          scene.add(mesh);
  
          renderer = new THREE.CanvasRenderer();
          renderer.setSize(window.innerWidth, window.innerHeight);
  
          document.body.appendChild(renderer.domElement);
  
          console.log("DPC? ", DPC);
          console.log("testlib.success? ", testlib.success);
          //console.log("DragPanControls? ", DragPanControls);
          console.log("DPC.DragPanControls? ", DPC.DragPanControls);
          cameraControls  = new DPC.DragPanControls(camera);
  
      };
  
      function animate() {
  
          // note: three.js includes requestAnimationFrame shim
          requestAnimationFrame(animate);
  
          //mesh.rotation.x += 0.01;
          //mesh.rotation.y += 0.02;
  
          cameraControls.update();
  
          console.log("camera.position.x: ", camera.position.x);
  
          renderer.render(scene, camera);
  
      };
  
  });
  </code></pre>
  
  <p>This is js/myLibs/dragPanControls.js:</p>
  
  <pre><code>/** @namespace */
  define(["../libs/three.js/build/three"],
      function () {
  
          // Setup work:
  
          var DragPanControls;
  
  
          DragPanControls = function(object, domElement)
          {
              console.log("drapancontrols kan finde THREE? ", THREE);
  
              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 );
          }
  
          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 );
          }
  
          DragPanControls.prototype.update    = function(event)
          {
              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 );
  
              //console.log("this._mouseX: ", this._mouseX);
              //console.log("this.rangeX: ", this.rangeX);
  
              //console.log("this._object.position.x: ", this._object.position.x);
              //console.log("this._object.position.y: ", this._object.position.y);
          }
  
          DragPanControls.prototype._onMouseMove  = function(event)
          {
              this._mouseX    = ( event.clientX / window.innerWidth ) - 0.5;
              this._mouseY    = ( event.clientY / window.innerHeight) - 0.5;
          }
  
          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;
          }
  
          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;
          }
  
          // Return module:
          return {
              DragPanControls: DragPanControls
          };
      }
  );
  </code></pre>
  
  <p>*kindly lended from jeromeetienne</p>