My ultimate goal is to adjust the FOV value of my camera while triggering an animation. However, upon implementing the FOV value changes, I notice that my scene appears smaller.
This has led me to question the mathematical relationship between the FOV value and the distance position of a perspective camera.
The challenge lies in maintaining the same scene size (by adjusting the camera position) as the FOV value fluctuates.
Thank you for any insights or suggestions on this matter.
EDIT 1 :
Below is a code snippet depicting my dilemma: When I modify the FOV value of my camera (from 4 to 45), it alters the distance between my square and the camera. How can this be prevented?
let W = window.innerWidth, H = window.innerHeight;
let renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( W, H );
document.body.appendChild( renderer.domElement );
let camera = new THREE.PerspectiveCamera( 4, W/H, 1, 100 );
let scene = new THREE.Scene();
camera.position.set(0,0,14);
camera.lookAt(0,0,0);
let geo = new THREE.BoxGeometry(0.5, 0.5, 0.5);
let mat = new THREE.MeshNormalMaterial();
let mesh = new THREE.Mesh(geo, mat);
mesh.rotation.set(0.2,0.4,-0.1);
scene.add(mesh);
renderer.render(scene, camera);
let progress = {};
progress.fov = 4;
TweenMax.to(progress, 2,{
fov:45,
onUpdate:function(){
camera.lookAt(0,0,0);
camera.updateProjectionMatrix();
camera.fov = progress.fov;
renderer.render(scene, camera);
},
repeat:-1,
ease:Power3.easeInOut
});
body{margin:0;padding:0;overflow:hidden;background: #666;}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.js"></script>