Simple Third Person Camera (using Three.js/JavaScript)

Follow me on:

In the video, we cover:
* Game camera systems, 1st person vs 3rd person cameras
* Architecture considerations when building out the camera class, how to decouple things in a clean way for future reuse.
* Smooth interpolation and how to combat framerate changes.

[simondev]

If you're wondering how the math works, here's a copy paste from one of my responses:


b^(m + n) = b^n * b^m

so if lerp(a, b, t) = (b - a) * t + a

then

lerp(a, b, 1.0 - r^t)
= (b - a) * (1.0 - r^t) + a
= b - b*r^t + a*r^t

Let's say instead, I use x = t/2, so that would mean that
lerp(lerp(a, b, 1.0 - r^x), b, 1.0 - r^x) should be equal to lerp(a, b, 1.0 - r^t)

so

lerp(lerp(a, b, 1.0 - r^x), b, 1.0 - r^x)
= lerp(b - b*r^x + a*r^x, b, 1.0 - r^x)
= (b - (b - b*r^x + a*r^x)) * (1.0 - r^x) + (b - b*r^x + a*r^x)
= (b*r^x - a*r^x) * (1.0 - r^x) + (b - b*r^x + a*r^x)
= b*r^x - b*r^2x - a*r^x + a*r^2x + b - b*r^x + a*r^x
= b - b*r^2x + a*r^2x

Substituting x = t / 2
= b - b*r^(2*(t/2)) + a*r^(2*(t/2))
= b - b*r^t + a*r^t

[RTW]

This is the type of content on youtube that is pure gold. Just found your channel, thank you for all of this!

[bremulate]

Nothing more captivating for a game developer than listening to a wise sage who talks you through game development. I am here to complete this quest.

[ajlightning]

These are my favorite vids to start off the week with, I always learn so much

[michaelkane]

You're just one of the most greatest teacher & developer who i've seen in youtube so far!

[jtmcdole]

I know this was years ago; but thanks for posting this. It helped a lot, even though my camera movement is slightly different (A/D are strafing; left-right mouse is for turning). I'm still working on up/down camera movement since it's not just "rotate the camera up and down", but I'll get around to that later.

[felipeferrari]

This tutorial is gold, thanks man for your work. Really helped a lot of people.

[zaidsasso]

Thanks man for all your videos, they're really helpful and you are kinda funny, love ur content <3

[kwynintelligence]

Thanks again. I tried this one too and it works fine for my needs ... just try to get the y-axis movement.

[alexskinner]

I'm convinced that every tutorial you make begins with code from some other tutorial you made, and it all loops infinitely. The ultimate troll.

[StrangerInAStrangeLand]

The google suggested searches cracked me up

[pdee]

Thank you for the valuable lesson. Its very helpful.

[leonardosandri]

awesome video you saved me hours for uni project

[Meltdown_Gaming]

What is the .Position and .Rotation? I'm copy and pasting in the "get Position" stuff but "get" is not defined? Please help!

[glowiever]

still struggling with the third method explanation. I use the second method. works well so far.

[the_real_powerbuoy]

Awesome stuff! As someone who isn't a freaking genius I wish some things were explained more thoroughly, but nevertheless I am learning 😁👍

[notevoyadarminombre]

Thank you very much, this is a pretty nice tutorial

[colonthree]

You have no idea how much I struggled to make the camera dynamically position itself in the scene based on distance to nearby objects and keep the character and the target in focus at the same time. ;_;

[thanos]

i just suscribe you are amazing from now and forever one of my favorite

[matiasperz]

Incredible video! So much valuable info!