I'm currently working through a tutorial on that focuses on tweening a camera's field of view in three.js. However, I've encountered an issue where the value doesn't seem to update as expected. Can anyone offer insight into what might be going wrong? Here is the relevant portion of my code:
var fov = 70;
var zoomFov = 100;
function onDocumentMouseUp( event ) {
castRay();
}
function castRay(){
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
var camObj = intersects[0].object;
camTween = new TWEEN.Tween( fov ).to( zoomFov,500 ).easing( camEase );
camTween.start();
camTween.onUpdate(function(){
updateCam(fov);
});
}
}
function updateCam(fov){
console.log(fov); //MH - outputs 70 every time
}
function animate() {
requestAnimationFrame( animate );
render();
TWEEN.update();
}