三个JS：添加补间动画以缩放以适合

Question

在这里，我想在三个JS中添加动画，并使用补间进行缩放以适应功能。我在按钮单击中实现了缩放以适合场景中心点的功能。我尝试在其中添加补间的地方几乎可以正常工作。所以，请让我解决这个问题 提琴https://jsfiddle.net/zmw82yLs/

    var renderer, scene, camera;
    var angle = 0;

    init();
    animate();

    function init() {
        // info
        var info = document.createElement('div');
        info.style.position = 'absolute';
        info.style.top = '30px';
        info.style.width = '100%';
        info.style.textAlign = 'center';
        info.style.color = '#fff';
        info.style.fontWeight = 'bold';
        info.style.backgroundColor = 'transparent';
        info.style.zIndex = '1';
        info.style.fontFamily = 'Monospace';

        document.body.appendChild(info);

        // renderer
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // scene
        scene = new THREE.Scene();

        // ambient light
        var ambient = new THREE.AmbientLight(0x404040);
        scene.add(ambient);

        // directional light
        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position.set(-1, -0.5, 1);
        scene.add(directionalLight);

        // camera
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(100, -100, 50);
        camera.up.set(0, 0, 1);

        // controls
        controls = new THREE.TrackballControls(camera);
        controls.target = new THREE.Vector3(0, 0, 0);
        controls.staticMoving = true;

        // material
        var material = new THREE.MeshPhongMaterial({
            color: 0xff0000,
            shading: THREE.FlatShading
        });

        // geometry
        var geometry = new THREE.BoxGeometry(50, 50, 50);

        $(document).ready(function () {
            $(".button").click(function () {
                //set some offset range
                var offset = 4;
                //bounding box
                const boundingBox = new THREE.Box3();
                boundingBox.setFromObject(mesh);

                const center = boundingBox.getCenter();
                const size = boundingBox.getSize();
                //get the max value
                const maxDim = Math.max(size.x, size.y, size.z);
                // Convert camera fov degrees to radians
                // var fov = camera.fov * (Math.PI / 180);
                const fov = camera.fov * (Math.PI / 180);
                let cameraZ = Math.abs(maxDim / 5 * Math.tan(fov * 3));
                cameraZ *= offset;
                camera.position.z = cameraZ;
                // const minZ = boundingBox.min.z;
                // const cameraToFarEdge = (minZ < 0) ? -minZ + cameraZ : cameraZ - minZ;
                // camera.far = cameraToFarEdge * 3;
                // camera.updateProjectionMatrix();
                // find intersections
                if (controls) {
                    controls.target = center;
                    // controls.maxDistance = cameraToFarEdge * 2;
                } else {
                    camera.lookAt(center)
                }
            });
        });
        // mesh
        var mesh = new THREE.Mesh(geometry, material);

        scene.add(mesh);

    }

    // render
    function render() {
        controls.update();
        controls.object.up.set(0, 0, 1);
        renderer.render(scene, camera);
    }

    // animate
    function animate() {
        controls.object.up.set(0, 0, 1);
        requestAnimationFrame(animate);
        render();
    }