# \[Solved\] Smooth Chase Camera for an object

**URL:** <https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216>\
**Category:** Questions\
**Tags:** camera\
**Created:** [June 23, 2018, 6:29pm UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216 "2018-06-23T18:29:37Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [June 23, 2018, 6:29pm UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216/1 "2018-06-23T18:29:37Z")

</div>

Hello Everyone,

I have been trying to create a chase cam that could be used to follow an object with smooth transitions.

I found something very promising snippet from Unity website.

```
var target : Transform;
var distance = 3.0;
var height = 3.0;
var damping = 5.0;
var smoothRotation = true;
var rotationDamping = 10.0;

function Update () {
	var wantedPosition = target.TransformPoint(0, height, -distance);
	transform.position = Vector3.Lerp (transform.position, wantedPosition, Time.deltaTime * damping);

	if (smoothRotation) {
		var wantedRotation = Quaternion.LookRotation(target.position - transform.position, target.up);
		transform.rotation = Quaternion.Slerp (transform.rotation, wantedRotation, Time.deltaTime * rotationDamping);
	}

	else transform.LookAt (target, target.up);
}

```

Clearly, its using unity API. Just wondering how can I translate it for threejs.

Till now, no success. Any help is deeply appreciated.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 24, 2018, 8:30am UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216/2 "2018-06-24T08:30:25Z")

</div>

> [@Atul\_Mourya](#):
>
> Till now, no success.

Can you please post your current progress as a fiddle?

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [June 24, 2018, 9:30am UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216/3 "2018-06-24T09:30:47Z")

</div>

I have my embarrassing dev [url](https://atul-mourya.gitlab.io/testdrive/app/) live right now.

It may be trouble full when loading it for the first time, give it a chance to load all the assets and then reload.  
I know the performance is terrible, but will keep trying to improve it.

My current goal is to create a chase cam similar to any other racing game. The problem right now is the camera follows the car alright but it does not align itself behind the car.

I’m currently using:

```
function cameraUpdate(){
   //creating an offset position for camera with respect to the car
	var offset = new THREE.Vector3(chassis.position.x + 20, chassis.position.y + 6, chassis.position.z);
	//tried to create delay position value for enable smooth transition for camera 
    camera.position.lerp(offset, 0.2);
    //updating lookat alway look at the car
	camera.lookAt(chassis.position.x, chassis.position.y, chassis.position.z); 
}

```

Please note : Reload the link if the car fails to detect collision or flips upside down. Use W, A, S, D for movement

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 24, 2018, 12:10pm UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216/4 "2018-06-24T12:10:17Z")

</div>

A more simple solution: [https://jsfiddle.net/f2Lommf5/7613/](https://jsfiddle.net/f2Lommf5/7613/)

The camera is now a child of the animated mesh (player). In this way, it is easy to retain a certain offset to your car.

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [June 24, 2018, 12:22pm UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216/5 "2018-06-24T12:22:27Z")

</div>

I have tried this method before. Its totally fine when the surface is plain.

The problem with this method is, as the car shakes on rough terrain, the camera shakes as well. This is not how any other games behave.

I would expect that jerks and vibrations that the car experience must not be experienced by the camera, otherwise, it would make the player dizzy.

Ideally, camera should only follow the car at a certain relative position, while being independent of the shakes / vibration / jerks of the car.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 24, 2018, 12:27pm UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216/6 "2018-06-24T12:27:33Z")

</div>

Okay, I see what you mean.

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 24, 2018, 2:16pm UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216/7 "2018-06-24T14:16:40Z")

</div>

You can put a Object3D as “goal” on the position like in the example above instead the camera, then you copy the world position.

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/Fyrestar/6519yedL/)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

**Edit** : i made a bunch of more advanced third-person control examples here

> [@Third-Person Camera](https://discourse.threejs.org/t/third-person-camera/18624):
>
> Here are some basic examples i made for implementing a third-person camera. In order to avoid a stiff attachment to the player we can smoothly lerp the camera or camera rig to the goal to compensate quick motions. First the more ideal dolly concept which respects the dolly distance, moving the camera dolly behind the player again even when not moving. Dolly + goal (use keyboard ASDW) Fixed goal: [https://codepen.io/Fyrestar/pen/zYqjNOL](https://codepen.io/Fyrestar/pen/zYqjNOL) This is the first example i made longer ago. As you se…

---

<div class="post-metadata">

**Author:** ![Atul\_Mourya](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atul_mourya/32/1155_2.png) [@Atul\_Mourya](https://discourse.threejs.org/u/Atul_Mourya)\
**Post date:** [June 24, 2018, 2:59pm UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216/8 "2018-06-24T14:59:29Z")

</div>

Ohh!! This is amazing. It works. Exactly what it should be.

You made my day 😃.

Thanks a million.

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [March 5, 2020, 10:31pm UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216/9 "2020-03-05T22:31:48Z")

</div>

@Fyrestar If you don’t mind, could you update your fiddle to use a specific version of Three.js in the script src URL, just in case some future version of Three breaks the example, and so that the forum links remain working over time?

EDIT: That fiddle still works after two years, by the way. 🙂 Sorry for bumping the old thread. I am commenting about this anywhere I see it. When I’m learning and I run into an old broken fiddle it is always a bummer.

Here’s an updated fiddle with versioned Three.js: [https://jsfiddle.net/uyvhLbd9/](https://jsfiddle.net/uyvhLbd9/)

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [March 5, 2020, 11:19pm UTC](https://discourse.threejs.org/t/solved-smooth-chase-camera-for-an-object/3216/10 "2020-03-05T23:19:17Z")

</div>

I’ve updated it 👍