[Solved] Smooth Chase Camera for an object

Questions
1

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.

2

Can you please post your current progress as a fiddle?

3

I have my embarrassing dev url 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

2 Likes
4

A more simple solution: 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.

3 Likes
5

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.

6

Okay, I see what you mean.

1 Like
7

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: i made a bunch of more advanced third-person control examples here

13 Likes
8

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

You made my day :smiley:.

Thanks a million.

9

@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. :slight_smile: 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/

3 Likes
10

I’ve updated it :+1:

1 Like