如何在Three.js中跨過場景？

Question

我正在開發一個用於顯示屬性及其元素（如牆壁，門等）的應用程序。我需要控制相機以縮放到場景中的特定對象。 但是，我需要在對象之間緩慢移動相機，而不要快速移動。 我這里有一個例子：

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

在此示例中，當您從列表中單擊一個對象時，相機會飛到該對象。 我該如何在Three.js中進行飛行？

謝謝。

Answer 1

它稱為補間。
有一些JS補間庫。
我首選的補間庫是Greensock的 TweenLite或TweenMax

要執行我認為想要的操作，只需在場景中補間相機的屬性即可。

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