How to animate camera.zoom in three.js with

Question

How to animate the zoom of camera in three.js with orthigraphic camera. Without animation it is very simple. I only have to set camera.zoom = 1 . But I want to animate it with tween.js.

There is my codePen: http://codepen.io/anon/pen/yVOOLj?editors=1111

 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(); }); 

 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;} 

 <script src="http://sole.github.io/tween.js/build/tween.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script> <script src="http://threejs.org/build/three.min.js"></script> <div id="canvas"> <div id="withoutAnim" class="button" >working zoom without animation</div> <div id="withAnim" class="button" >zoom with animation - not working</div> 

Answer 1

It's better to put it like that then (without global variables):

$("#withAnim").click(function() {
  var zoom = {
    value: camera.zoom // from current zoom (no matter if it's more or less than 1)
  };
  var zoomEnd = {
    value: 1 // to the zoom of 1
  };
  var tween = new TWEEN.Tween(zoom).to(zoomEnd, 500); // duration of tweening is 0.5 second
  tween.onUpdate(function() {
    camera.zoom = zoom.value;
  });
  tween.start();
});

jsfiddle example