关于javascript：如何使用Three.js来对camera.zoom进行动画处理


How to animate camera.zoom in three.js with

如何使用正交摄影机对Three.js中的摄影机动画进行动画处理。
没有动画，这非常简单。 我只需要设置camera.zoom = 1。
但是我想用tween.js制作动画。

有我的代码笔：
http://codepen.io/anon/pen/yVOOLj?editors=1111

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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);\t

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();
 
});
1
2
3
4
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;}

1
2
3
4
5
6
7
8
<script src="http://sole.github.io/tween.js/build/tween.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
<script src="http://threejs.org/examples/js/controls/OrbitControls.js">
<script src="http://threejs.org/build/three.min.js">


working zoom without animation
zoom with animation - not working

最好这样说(不带全局变量)：

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#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示例

相关讨论