如何在 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);

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

How to flyover a scene in three.js?

javascript

camera

three.js