通过在线的几个研究和示例，我可以在不同的位置上来回切换相机 . 但是，在向顶视图设置动画时似乎存在问题 . 哪个外观不能保持在中间，它有点“向上”然后“向下”

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);

}