如何在三个JS中将TWEEN添加到适合屏幕

Question

在这里，我尝试将对象在旋转方向上居中放置在场景中。但是我想在其中添加一些补间效果，如果我触发按钮FITALL，则对象必须缓慢移动到中心点。我使用TWEEN进行了尝试，但是当我将对象旋转到后视图并按下FITALL按钮时，遇到了对象旋转不规则的问题。 请帮我解决这个问题

这是小提琴http://jsfiddle.net/m2u78r9x/

// Testing fitAll

var hostDiv, scene, renderer, camera, root, controls, light, shape, pArray, pCloud, blink;
var bs;

var WIDTH = 500;//window.innerWidth,
    HEIGHT = 500;//window.innerHeight,
    FOV = 35,
    NEAR = 1,
    FAR = 1000;

function init() {
    hostDiv = document.createElement('div');
    document.body.appendChild(hostDiv);

    renderer = new THREE.WebGLRenderer({ antialias: true, preserverDrawingBuffer: true });
    renderer.setSize(WIDTH, HEIGHT);
    hostDiv.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
    camera.position.z = 500;

    controls = new THREE.TrackballControls(camera, renderer.domElement);

    light = new THREE.PointLight(0xffffff, 1, Infinity);
    light.position.copy(camera.position);

    scene = new THREE.Scene();
    scene.add(camera);
    scene.add(light);

    var geo = new THREE.BoxGeometry(50, 50, 50);
    geo.computeBoundingSphere();
    bs = geo.boundingSphere;
    var mat = new THREE.MeshPhongMaterial({color:'red'});
    var msh = new THREE.Mesh(geo, mat);
    scene.add(msh);

    msh.translateX(25);
    msh.translateY(25);
    msh.translateZ(25);
    msh.updateMatrix();
    msh.updateMatrixWorld();

    bs.applyMatrix4(msh.matrixWorld);

    animate();
}

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

function animate() {
    light.position.copy(camera.position);    

    requestAnimationFrame(animate);
    render();
    controls.update();
}

function fitAll(){
    var tmp = bs.center.clone();
    camera.worldToLocal(tmp);
    console.log(tmp);
     /* camera.translateX(tmp.x);
     camera.translateY(tmp.y); */
    if(tmp.z >= 0){
        camera.translateZ(tmp.z + 1.);
    }
    controls.target.copy(bs.center);
    camera.lookAt(bs.center);

    var newDist = bs.radius / Math.sin( (camera.fov * (Math.PI / 180)) / 3 );
    var axis = camera.position.clone();
    axis.sub(bs.center);
    axis.setLength(newDist);
    axis.add(bs.center);
    camera.position.copy(axis);
    controls.object.position.copy(camera.position);
    controls.object.lookAt(controls.target);
    stepByStep();
    controls.update();
}

function prep(){
    camera.position.set(5, 5, 5);
    controls.target.set(5, 5, 0);
    controls.update();
}
init();