title: How to add datgui controls for camera in threejs?
body: <p>I want to to enable dat-gui controls for the threejs camera in the basic threejs example on this page:</p>
  
  <p><a href="https://github.com/mrdoob/three.js/" rel="nofollow">https://github.com/mrdoob/three.js/</a></p>
  
  <pre><code>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 );
  
  }
  
  function animate() {
  
      // note: three.js includes requestAnimationFrame shim
      requestAnimationFrame( animate );
  
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.02;
  
      renderer.render( scene, camera );
  
  }
  </code></pre>
  
  <p>I've tried the following code:</p>
  
  <pre><code>var params = {
      z: 100
  }
  
  var gui = new dat.GUI();
  
  gui.add(params, 'z', -500,500).step(5).onChange(function(value){
          changeCameraZ(value);
      });
  function changeCameraZ(value){
      camera.position.z = value;
  }
  </code></pre>
  
  <p>which works, but it means that I have to write a new function:
  <code>changeBlah(); </code></p>
  
  <p>for each three.js variable I wish to change from the GUI.  Is there a better, cleaner way of achieving this?</p>