补间/动画Threejs相机到顶视图

Question

通过一些在线研究和示例，我能够在不同位置来回移动相机。但是，设置顶视图动画时似乎存在问题。外观无法保持在中间，并且先后先下后移

如何在保持中心位置的同时平稳地导航到目的地。 https://codepen.io/edwinlimlx/full/QzWBrY

var camera;
var controls;
var scene;
var torus;

var light;
var renderer;
var w = window.innerWidth;
var h = window.innerHeight;
var is3D = true;
var frustumSize = 200;

init();
animate();

function init() {
  //WebGL Renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  //renderer.setClearColor(0xffffff, 1)
  renderer.setSize(w, h);
  $(".webgl").append(renderer.domElement);

  //camera
  var aspect = w / h;
  camera = new THREE.OrthographicCamera(
    frustumSize * aspect / -2,
    frustumSize * aspect / 2,
    frustumSize / 2,
    frustumSize / -2,
    1,
    1000
  );
  camera.aspect = aspect;
  camera.position.set(frustumSize, frustumSize, frustumSize);

  //controls
  controls = new THREE.MapControls(camera, renderer.domElement);
  controls.minZoom = 1;
  controls.maxZoom = 6;

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

  // Helpers
  axes = new THREE.AxisHelper(50);
  helper = new THREE.GridHelper(200, 10);
  scene.add(axes);
  scene.add(helper);

  // Torus Geometry
  torus = new THREE.Mesh(
    new THREE.TorusGeometry(60, 30, 20, 20),
    new THREE.MeshNormalMaterial()
  );
  torus.position.set(0, 0, 0);
  scene.add(torus);

  //Hemisphere Light
  // light = new THREE.HemisphereLight(0xffbf67, 0x15c6ff);
  // scene.add(light);

  $(".click").click(function() {
    is3D = !is3D;

    var endPos = is3D
      ? {
          x: 200,
          y: 200,
          z: 200
        }
      : {
          x: 0,
          y: 500,
          z: 0
        };

    var lookAt = new THREE.Vector3();

    // save original postion and rotation
    var startPos = new THREE.Vector3().copy(camera.position);
    var startQua = new THREE.Quaternion().copy(camera.quaternion);

    // extract the end quaternion
    camera.position.set(endPos.x, endPos.y, endPos.z);
    camera.lookAt(lookAt);
    var endQua = new THREE.Quaternion().copy(camera.quaternion);

    // reset original position and rotation
    camera.position.set(startPos.x, startPos.y, startPos.z);
    camera.quaternion.copy(startQua);

    // var tween = new TWEEN.Tween(from)
    // .to(to, 600)
    // .easing(TWEEN.Easing.Linear.None)
    // .onUpdate(function () {
    //   camera.position.set(this.x, this.y, this.z);
    //   camera.lookAt(new THREE.Vector3(0, 0, 0));
    // })
    // .onComplete(function () {
    //   camera.lookAt(new THREE.Vector3(0, 0, 0));
    // })
    // .start();

    var o = { t: 0 };

    new TWEEN.Tween(o)
      .to(
        {
          t: 1
        },
        1000
      )
      .onUpdate(function() {
        console.log(startPos, endPos, o.t);
        var currentPos = new THREE.Vector3().copy(startPos);
        currentPos.lerp(endPos, o.t);
        camera.position.copy(currentPos);

        var currentQua = new THREE.Quaternion().copy(startQua);
        currentQua.slerp(endQua, o.t);
        camera.quaternion.copy(currentQua);
      })
      .onComplete(function() {
        controls.target = lookAt;
        controls.update();
      })
      .easing(TWEEN.Easing.Linear.None)
      .start();
  });
}

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  TWEEN.update();
  renderer.render(scene, camera);
}