Camera transition depending zoom

Hello everyone!

Given a scene where I have two models, one outside (visible) and one interior (inside this one but hidden) I want to be able to trigger a transition in which depending on the zoom to the outside model I hide it, show the inside and gently zoom to the latter.

I already have been reading about this and I’ve got the conclusion that it is two possibilities to do that, with Tween library or with the animation system of three but I’m still learning and I don’t know what I should do.

I found a piece of code using Tween that I put into a function in order to implement the transition through a button like a first approach but I don’t know if the code is right since I get an error in the library.

code:

var position = {X: 200, Y: 200, Z: 200, lookX: 0, lookY: 0, lookZ: 0};
    tween = new TWEEN.Tween(position).to({X: 0, Y: 300, Z: 0, lookX: 0, lookY: 0, lookZ: 0}, 2000);
    tween.easing(TWEEN.Easing.Circular.InOut);
    tween.onUpdate(function(){
        camera.position.set(position.X,position.Y,position.Z);
        camera.lookAt( {x:position.lookX, y:position.lookY, z:position.lookZ } );
    });
    tween.start();

error:
imagen

Thanks in advance. :smile: