title: How to animate camera.zoom in three.js with
body: <p>How to animate the zoom of camera in three.js with orthigraphic camera.
  Without animation it is very simple. I only have to set <code>camera.zoom = 1</code>. 
  But I want to animate it with tween.js.</p>
  
  <p>There is my codePen:
  <a href="http://codepen.io/anon/pen/yVOOLj?editors=1111" rel="nofollow noreferrer">http://codepen.io/anon/pen/yVOOLj?editors=1111</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var scene = new THREE.Scene();
  var camera = new THREE.OrthographicCamera(640 / -2, 640 / 2, 380 / 2, 380 / -2, -5000, 5000);
  camera.position.set(100,100,100);
  camera.zoom = 0.1;
  
  
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( 640, 380 );
  renderer.setClearColor("#FFF");
  $("#canvas").append( renderer.domElement );
  
  var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
  var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );
  
  var originAxes = new THREE.AxisHelper(1200);
  scene.add(originAxes); 
  
  var controls = new THREE.OrbitControls(camera, renderer.domElement, renderer, scene);
  
  animate();
  
  function animate(){
    camera.updateProjectionMatrix();
    requestAnimationFrame( animate );
    TWEEN.update();
    render();
  }
  
  function render() {
    renderer.render(scene, camera);
  };
  
  
  $("#withoutAnim").click(function () {
    camera.zoom = 1;    
  });
  
  $("#withAnim").click(function () { 
    var tween = new TWEEN.Tween(0).to(1,  500);
    tween.onUpdate(function () {
      camera.zoom = 0.10;
    });
    tween.start();
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { margin: 0; }
  #canvas {float: left; width: 640px; height: 380px; border: 1px solid #d3d3d3 }
  .button { border: 1px solid black; cursor: pointer; width: 230px; height: 20px;}
  .button:hover{background: blue; color: white;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://sole.github.io/tween.js/build/tween.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://threejs.org/examples/js/controls/OrbitControls.js"&gt;&lt;/script&gt;
  &lt;script src="http://threejs.org/build/three.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="canvas"&gt;
  &lt;div id="withoutAnim" class="button" &gt;working zoom without animation&lt;/div&gt;
  &lt;div id="withAnim" class="button" &gt;zoom with animation - not working&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>