CODEWITHSUNDEEP
javascriptcamerathree.js
mbehnaam
mbehnaam

Reputation: 431

How to flyover a scene in three.js?

I am developing an application to show a property and its elements such as walls, doors, etc. I need to control camera to zoom to specific objects on the scene. However, I need to move camera slowly between objects and not quick movement. I have an example here:

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

In this example, when you click an object from the list, camera flies to that object. How can I do a fly in Three.js?

Thanks.

Upvotes: 0

Views: 786

Answers (2)

mbehnaam
mbehnaam

Reputation: 431

This what I have used. Works very well using 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);

Upvotes: 0

2pha
2pha

Reputation: 10155

Its called tweening.
There are a few tweening libraries for JS.
My preferred tweening library is TweenLite or TweenMax by Greensock

To do what I think you want, you would just tween the properties of the camera in your scene.

Upvotes: 1

Related Questions