如何在three.js中飞越场景？答案

【问题标题】：How to flyover a scene in three.js?如何在three.js中飞越场景？
【发布时间】：2015-01-05 10:44:18
【问题描述】：

我正在开发一个应用程序来显示属性及其元素，例如墙壁、门等。我需要控制相机以缩放到场景中的特定对象。但是，我需要在物体之间缓慢移动相机，而不是快速移动。我这里有一个例子：

http://interactivebuildings.planning.nsw.gov.au/planning-residential

在此示例中，当您单击列表中的对象时，相机会飞到该对象。如何在 Three.js 中进行飞行？

谢谢。

【问题讨论】：

这是一种方法吗？ createjs.com/#!/TweenJS

标签： javascript camera three.js

【解决方案1】：

它称为补间。
有一些用于 JS 的补间库。
我首选的补间库是 Greensock 的 TweenLite 或 TweenMax

要做我认为你想做的事，你只需在场景中补间相机的属性。

【讨论】：

【解决方案2】：

这是我用过的。使用 tween.js http://www.createjs.com/#!/TweenJS 效果很好。

function test () {
var position = {X: 200, Y: 200, Z: 200, lookX: 0, lookY: 0, lookZ: 0};
tween = new TWEEN.Tween(position).to({X: 0, Y: 300, Z: 0, lookX: 0, lookY: 0, lookZ: 0}, 2000);
tween.easing(TWEEN.Easing.Circular.InOut);
tween.onUpdate(function(){
camera.position.set(position.X,position.Y,position.Z);
camera.lookAt( {x:position.lookX, y:position.lookY, z:position.lookZ } );   
 });
tween.start();
}

test();
animate();
TWEEN.update(time);

【讨论】：