Do Si Do Si - 14 days ago 4
Javascript Question

How to animate camera.zoom in three.js with

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

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