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

**URL:** <https://discourse.threejs.org/t/solved-how-to-add-smooth-transition-to-three-js-orbital-camera/657>\
**Category:** Questions\
**Tags:** camera-controls, orbit-controls\
**Created:** [July 27, 2017, 9:58pm UTC](https://discourse.threejs.org/t/solved-how-to-add-smooth-transition-to-three-js-orbital-camera/657 "2017-07-27T21:58:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![SebKaine](https://avatars.discourse-cdn.com/v4/letter/s/71c47a/32.png) [@SebKaine](https://discourse.threejs.org/u/SebKaine)\
**Post date:** [July 27, 2017, 9:58pm UTC](https://discourse.threejs.org/t/solved-how-to-add-smooth-transition-to-three-js-orbital-camera/657/1 "2017-07-27T21:58:16Z")

</div>

Hi Guys,

I would like to replicate the orbital camera effects of sketchfab or babylon:  
https://sketchfab.com/models/b81008d513954189a063ff901f7abfe4/embed?  
[https://www.babylonjs.com/demos/pbrglossy/](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

> **[yomotsu/camera-controls](https://github.com/yomotsu/camera-controls)**
>
> A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features. - yomotsu/camera-controls

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

---

<div class="post-metadata">

**Author:** ![SebKaine](https://avatars.discourse-cdn.com/v4/letter/s/71c47a/32.png) [@SebKaine](https://discourse.threejs.org/u/SebKaine)\
**Post date:** [July 28, 2017, 8:36am UTC](https://discourse.threejs.org/t/solved-how-to-add-smooth-transition-to-three-js-orbital-camera/657/2 "2017-07-28T08:36:31Z")

</div>

well it look that the best method is to combine:

- `camera.quaternion.slerp()`
- `TWEEN.Easing.Quadratic.InOut()`

> <https://stackoverflow.com/questions/18401213/how-to-animate-the-camera-in-three-js-to-look-at-an-object>

  

> <https://stackoverflow.com/questions/32723678/threejs-smoothly-rotate-camera-towards-an-object>

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

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [July 29, 2017, 11:40am UTC](https://discourse.threejs.org/t/solved-how-to-add-smooth-transition-to-three-js-orbital-camera/657/3 "2017-07-29T11:40:19Z")

</div>

Have you tried using [OrbitControls](https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.js) 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.

---

<div class="post-metadata">

**Author:** ![SebKaine](https://avatars.discourse-cdn.com/v4/letter/s/71c47a/32.png) [@SebKaine](https://discourse.threejs.org/u/SebKaine)\
**Post date:** [July 31, 2017, 12:07pm UTC](https://discourse.threejs.org/t/solved-how-to-add-smooth-transition-to-three-js-orbital-camera/657/4 "2017-07-31T12:07:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SebKaine](https://avatars.discourse-cdn.com/v4/letter/s/71c47a/32.png) [@SebKaine](https://discourse.threejs.org/u/SebKaine)\
**Post date:** [August 1, 2017, 3:46pm UTC](https://discourse.threejs.org/t/solved-how-to-add-smooth-transition-to-three-js-orbital-camera/657/5 "2017-08-01T15:46:10Z")

</div>

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/](https://www.babylonjs.com/demos/pbrglossy/)

Thanks again for the tips looeee ! 🙂

---

<div class="post-metadata">

**Author:** ![paparyku](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paparyku/32/2974_2.png) [@paparyku](https://discourse.threejs.org/u/paparyku)\
**Post date:** [October 18, 2018, 11:27pm UTC](https://discourse.threejs.org/t/solved-how-to-add-smooth-transition-to-three-js-orbital-camera/657/6 "2018-10-18T23:27:15Z")

</div>

Thanks for sharing this info!