three.jsでcamera.zoomをアニメーション化する方法

Question

3台のカメラでズームをアニメーション化する方法。 アニメーションがなければ非常に簡単です。私はcamera.zoom = 1を設定するだけです。 しかしtween.jsでアニメーションを作成したいと思います。

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

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

それは（グローバル変数なし）そのようにそれを置くために良いでしょう：

$("#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例