title: How to rotate world axis around a different point other than the origin?
body: <p>I am modelling a room in three.js and I want to rotate the camera around the middle of the room. At the moment the camera only rotates around the origin. I am not sure if the camera needs to be moved or if the world needs to be translated. The coordinates system needs to stay on the positive side as I got to show various objects that will be streamed from a server.</p>
  
  <p>I would also like to move the room around. I know I need to do some translation, but I cannot find how to do it. Some calls to translation just distorted the perspective of the room more than move it. </p>
  
  <pre><code>var renderer,
  scene,
  camera,
  controls;
  
  renderer = new THREE.WebGLRenderer({ antialias: true });
  
  document.body.appendChild( renderer.domElement );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor( 0x000000, 1.0 );
  
  scene = new THREE.Scene();
  
  
  
  //build room
  var room = buildRoom(500, 500, 500);
  scene.add(room);
  
  camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.set(250, -500, 500); 
  
  camera.up.set(0.16608561365563415,-0.25348683041890424,  1.5868711339427681);
  camera.lookAt( new THREE.Vector3( 500, 500, 000 ) );
  
  
  controls = new THREE.TrackballControls( camera );
  controls.rotateSpeed = 1.0;
  controls.zoomSpeed = 0.8;
  controls.panSpeed = 0.8;
  
  controls.noZoom = false;
  controls.noPan = false;
  
  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.3;
  
  animate();
  
  function animate() {
      requestAnimationFrame( animate );
      controls.update();
      renderer.render( scene, camera );
  }
  
  function buildRoom( xlen, ylen, zlen ) {
      var axes = new THREE.Object3D();
      //put x lines
      axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( xlen, 0, 0 ), 0xFF0000, false ) ); // +X
      axes.add( buildAxis( new THREE.Vector3( 0, ylen, 0 ), new THREE.Vector3( xlen, ylen, 0 ), 0xFF0000, false ) ); // parallel +X
      //y lines 
      axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, ylen, 0 ), 0x00FF00, false ) ); // +Y
      axes.add( buildAxis( new THREE.Vector3( xlen, 0, 0 ), new THREE.Vector3( xlen, ylen, 0 ), 0x00FF00, false ) ); // prallel+Y
      //z lines    //are four
      axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, zlen ), 0x0000FF, false ) ); // +Z
      axes.add( buildAxis( new THREE.Vector3( xlen, 0, 0 ), new THREE.Vector3( xlen, 0, zlen ), 0x0000FF, false ) ); // +Z
      axes.add( buildAxis( new THREE.Vector3( 0, ylen, 0 ), new THREE.Vector3( 0, ylen, zlen ), 0x0000FF, false ) ); // +Z
      axes.add( buildAxis( new THREE.Vector3( xlen, ylen, 0 ), new THREE.Vector3( xlen, ylen, zlen ), 0x0000FF, false ) ); // +Z
      return axes;
  }
  
  
  function buildAxis( src, dst, colorHex, dashed ) {
      var geom = new THREE.Geometry(),
          mat;
  
      if(dashed) {
          mat = new THREE.LineDashedMaterial({ linewidth: 3, color: colorHex, dashSize: 3, gapSize: 3 });
      } else {
          mat = new THREE.LineBasicMaterial({ linewidth: 3, color: colorHex });
      }
  
      geom.vertices.push( src.clone() );
      geom.vertices.push( dst.clone() );
      geom.computeLineDistances(); // This one is SUPER important, otherwise dashed lines will appear as simple plain lines
  
      var axis = new THREE.Line( geom, mat, THREE.LinePieces );
  
      return axis;
  }
  </code></pre>