三个JS：如何添加补间效果以适合屏幕？

Question

在这里，我试图添加补间效果以适合屏幕，但是当我尝试添加补间效果时，补间效果会在对象达到适合屏幕后更新。

当我尝试添加效果时，相机无法捕获当前相机位置和结束位置（中心适合屏幕位置）之间的效果。

我附上了小提琴链接。

请帮我解决这个问题

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var cube1 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
    cube1.position.x = -1;
    scene.add(cube1);

    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    var cube2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0x0000ff }));
    cube2.position.x = 1;
    scene.add(cube2);

    camera.position.z = 3;
    var center = new THREE.Vector3(0, 0, 0)
    document.querySelector('#tweenCenter').addEventListener('click', () => {
        var box = new THREE.Box3();
        var to = {
            x: controls.target.x,
            y: controls.target.y,
            z: controls.target.z
        };
        box.setFromObject(cube1);
        box.center(controls.target);
        var tween1 = new TWEEN.Tween(camera.position)
            .to({
                x: controls.target.x,
                y: controls.target.y,
                z: controls.target.z
            }, 200)
            .delay(200)
            .easing(TWEEN.Easing.Quadratic.Out)
            .start();

        // render();

        render();
    });
    document.querySelector('#tweenExample').addEventListener('click', () => {
        var to = {
            x: center.x,
            y: center.y,
            z: center.z
        };
        var tween1 = new TWEEN.Tween(camera.position)
            .to(to, 700)
            .delay(200)
            .easing(TWEEN.Easing.Linear.None)
            .start();
        render();

        var tween2 = new TWEEN.Tween(camera.position)
            .to(to, 700)
            .delay(400)
            .easing(TWEEN.Easing.Quadratic.Out);

        tween2.onUpdate(function (object) {
            cube2.rotation.y = object.y;
        });

        tween2.start();
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        renderer.render(scene, camera);
        controls.update();
        render();
    });

    function animate(ts) {
        requestAnimationFrame(animate);

        TWEEN.update(ts);

        renderer.render(scene, camera);
    };
    function render() {

        camera.updateProjectionMatrix();
        // geometry.rotation.x += 1;
        renderer.render(scene, camera);
        controls.update();
    }
    animate();