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:

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=".js/build/tween.min.js"></script>
<script src=".1.0/jquery.min.js"></script>
<script src=".js"></script>
<script src=".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>

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./ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://threejs/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs/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>

• javascript
• animation
• three.js
• tween.js

Share Improve this question Follow edited Nov 24, 2016 at 7:33 Rizban Ahmad 13911 silver badge1313 bronze badges asked Nov 20, 2016 at 15:57 Do SiDo Si 2711 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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