[SOLVED]How to add smooth transition to three.js orbital camera?

Questions
,
1

Hi Guys,

I would like to replicate the orbital camera effects of sketchfab or babylon:

https://www.babylonjs.com/demos/pbrglossy/
with the elegant feeling of weight and ease in / ease out.

What would be the best way to repliacte this in three.js.?
For the moment i have found the following option :

  • use THREE.quaternion
  • use Pure Math expression
  • use Tween.js

The best i have find for the moment is this one

But it is still not perfect imo , the ease in / ease out is ok , but i don’t have the weight feeling.

If you have any better idea i would be glad to know !
Thanks for your time.
Cheers
SK

1 Like
2

well it look that the best method is to combine:

  • camera.quaternion.slerp()
  • TWEEN.Easing.Quadratic.InOut()


i will try to post an exemple when i have good enough output.

1 Like
3

Have you tried using OrbitControls and setting controls.enableDamping = true?

Then if you play around with controls.dampingFactor you should be able to get a similar feel.

Note that if you have this enabled you will have to call controls.update() in your render loop.

3 Likes
4

Thanks a lot for your help looeee, i will test your advise as option 1.
That sound like a perfect solution.

5

i got a good enough solution with the following presets.

		var controls = new THREE.OrbitControls(camera);
		controls.enablePan = false;
		controls.enableZoom = false; 
		controls.enableDamping = true;
		controls.minPolarAngle = 0.8;
		controls.maxPolarAngle = 2.4;
		controls.dampingFactor = 0.07;
		controls.rotateSpeed = 0.07;

But it’s good at 80%, i still feel that the babylon.js camera in this exemple, is a little more elegant, with a better weight sensation.
https://www.babylonjs.com/demos/pbrglossy/

Thanks again for the tips looeee ! :slight_smile:

5 Likes
6

Thanks for sharing this info!