Hey there, I've been attempting to animate a transition between scenes in THREE js for quite some time now. I have successfully cleared the scene and recreated the next one, but the transition between them is proving to be quite challenging. I have created two functions:
function zoomInTransition() {
var zInMin = 15;
for (camera.fov; camera.fov > zInMin; camera.fov-=3) {
camera.updateProjectionMatrix();
}
}
function zoomOutTransition () {
var zOutMax = 70;
for (camera.fov; camera.fov < zOutMax; camera.fov+=3) {
camera.updateProjectionMatrix();
}
}I call each function like this:
function buttonReaction(){
for (var i in objects) {
switch(objects[i].name) {
case "door_1":
zoomInTransition();
Start(room2);
zoomOutTransition()
break;
case "door_2":
zoomInTransition();
Start(room1);
zoomOutTransition()
break;
default:
console.log("default");
};
};
}Nevertheless, I am struggling to achieve a smooth zoom transition, as it iterates too quickly for the projection matrix updates to display properly. I'm running out of ideas... Any suggestions would be greatly appreciated. Thank you.