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

Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/simondevyoutube/
I show you how to build out a simple third person camera in three.js and JavaScript, from scratch. The goal here is to understand the mechanics of a simple follow camera (or third person camera), what goes into designing one, what considerations are made, and how to code one up. We'll step through various smoothing options and show you the effect of framerate differences and how to mitigate those problems.
Previously in videos, we covered three.js camera support and how to build out a simple third person character controller. This tutorial is a natural progression of the topic, covering 3rd person cameras. This is all part of a series of beginner tutorials on three.js, starting scratch and working up to the point of having moving animated characters in a small world.
The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.
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.

[@simondev758]

If you're wondering how the math works, here's a copy paste from one of my responses: Associativity of multiplication for exponents, en.wikipedia.org/wiki/Exponentiation#Integer_exponents 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

[@zubinchadha6489]

which mario game is that at 1:26

[@RTW590]

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

[@bremulate5318]

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.

[@michaelkane1072]

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

[@aj35lightning]

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

[@simondev758]

That's awesome, really glad you're enjoying them!

[@felipeferrari1754]

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

[@simondev758]

np glad you found it useful

[@matiasperz]

Incredible video! So much valuable info!

[@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.

[@p3dee]

Thank you for the valuable lesson. Its very helpful.

[@notevoyadarminombre156]

Thank you very much, this is a pretty nice tutorial

[@zaidsasso2138]

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

[@jcaky8155]

Amazing tutorial! Tanks for that

[@ibrondtd]

Thank you, great video! Additionally to be able to move the mouse for the player to follow the rotation would be awesome.

[@thanos2380]

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

[@kritikkaushal6305]

Thank you so much!

[@simondev758]

No worries! Let me know if you have ideas or suggestions for future videos.

[@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 😁👍

[@simondev758]

Heh sorry if I move quickly, it's hard to strike a balance between over and under explaining. Hopefully the most important parts are there, and if not, reach out!

[@kwynintelligence435]

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

[@simondev758]

Ooh yeah I should really add some jumping, maybe a future tutorial.

[@kwynintelligence435]

@@simondev758 maybe with running up stairs?

[@StrangerInAStrangeLand1999]

The google suggested searches cracked me up

[@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. ;_;

[@martinnel2810]

Excellent videos and many thanks Simon! Really enjoying your tutorials. Seeing as you're open to suggestions on tutorials, could you do one that attaches a weapon to a Mixamo character and being able to fire it? Keep up the excellent work :)

[@simondev758]

Sure I can add it to my ideas list, but if you look at the mmorpg code I posted a few weeks ago, the characters did need to bind weapons to their hands. Take a look and tell me if that's what you're looking for.

[@martinnel2810]

@@simondev758 I have actually looked at the mmorpg one indeed, and that's excellent work for the amount of time you put into these tutorials! What I'm specifically after though is a two handed rifle shooting something like a lazer bullet, akin to star wars stormtrooper blasters. So bascially how to equip that in both hands and then how to fire a 'lazer' bullet and have it hit something? If it's as simple as editing some of what you've already done, then just maybe point me in the right direction? - Thanks again, your tutorials are excellent!!

[@simondev758]

@@martinnel2810 Gotcha, so this is getting pretty specific to your particular setup, so I'll just be vague. You already know how to bind a model to a bone, so you've got the rifle sorted out. To get the bullet, you simply spawn a particle in world space relative to the position of the rifle. The blaster effect, I made that exact effect in the "I tried making a 3d game in javascript" video.

[@martinnel2810]

@@simondev758 Ok great, I'll try to give it a go, I somehow missed your '3d game' with the x-wing. Thanks for pointing that out! One last question if you don't mind me asking. In your tutorial '3D World Generation: #3 (Quadtree & LOD)' -> I'm still trying to make sense of exactly how everything fits in place, so thought I'd ask. How do I get the terrain height at a certain point in that generated map? I see the 'Get' function in the HeightGenerator, but not sure how to reference it from say a player class?

[@simondev758]

@@martinnel2810 Need to pass it in some way through to relevant clients. I just threw together a quick Unity-style entity/component system which lets me grab it in the mmorpg code. github.com/simondevyoutube/Quick_3D_MMORPG/blob/main/client/src/player-entity.js#L273

[@glowiever]

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

[@joshuaocampo3987]

thanks babe

[@pist5343]

Thank you!

[@simondev758]

np

[@pist5343]

@@simondev758 Did not know about the Math.pow() trick. Even unity forums often get these camera lerps wrong!

[@simondev758]

Neat eh? I'm not surprised, honestly the normal lerp generally works "good enough" most of the time. But I worked professionally for big studios for years and I like to try to include knowledge I picked up there in these tutorials.

[@pist5343]

Yeah, greatly appreciated!

[@AntonioCorrenti]

But now I want to know how the pow trick works and why!

[@kanpekiken2481]

What I’ve been waiting for! Lol 🙏🙏🙏

[@simondev758]

Hope you found it useful!

[@rishwasandeepa7963]

amazing. can you teach us how to make survival game using three.js too? character jumping, shooting, inventory like that :)

[@alexskinner6905]

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.

[@simondev758]

I'm writing a meta program via youtube videos, with function calls out to other videos.

[@alexskinner6905]

@@simondev758 lol I believe you

[@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!

[@sahilgaur6882]

@SimonDev First of all, thanks for providing these tutorials. I am able to use the third person camera just fine. Now, I have added orbit controls in my scene and the target for it is my character with some offset but I am not able to use it whenever I am using the third person camera logic/ calling the update for third person camera. Can you tell me what I need to do to fix it?

[@SykoSilver]

Could you cover platforming like Tomb Raider? I know it's a complicated subject so maybe you could approach it in increments. How to procedurally generate platform-y terrain, jumping, grabbing edges/handholds

[@SykoSilver]

Also I have been loving all of your videos. Thank you!

[@simondev758]

I'll add it to my ideas doc!

[@nanberg8]

Amazing video, helped me a ton! I'd like to add "free look" functionality to my project, similar to how GTA V and other games work. Meaning that you can rotate the camera with your mouse to see the charatcter from any angle. If the character starts moving the camera will still follow but the rotation/angle will lerp to the original position after x ms. Let me know if you have any ideas on how to do this!

[@simondev758]

Some sort of hierarchical camera setup, where you have a 3rd person camera, and a free look as a child would probably work.

[@nanberg8]

@@simondev758 Thanks for replying! Don't quite get it (just been playing around with Three.js for a week or two though), but I'll figure it out. Maybe something you could incorporate in the new video/projects if you want, quite common for game to have this feature

[@ritikverma312]

@@nanberg8did you figured it out how to do it ?

[@wobbl6980]

can we have a tutorial of first person cameras?

[@simondev758]

Yes!

[@sepinaco]

Thanks you so much for your videos (L)

[@simondev758]

Glad you're enjoying them

[@salaheddineelmahjour8956]

💯

[@montoyland]

Thanks so much for sharing your knowledge! I have been learning a great deal from your ThreeJS series. I see that you are using Visual Studio Code as your IDE - do you think there is any benefit to building a more robust game code with TypeScript? I work a lot with PIXI and I find the intellisense provided by the IDE to be invaluable, since it aids in familiarizing oneself with the API.

[@simondev758]

I've heard good things about Typescript, having static typing would definitely be a nice change. I come from a C++ background, so this "make a variable and cram whatever crap you want into it, see if anything explodes at runtime" approach still feels a little wild-west to me. re: Visual Studio Code, mostly just like the syntax highlighting, don't really care that deeply about the autocomplete and all that. Used to use Sublime Text, even when I worked at Google working on C++ codebases with literally tens of millions of lines of code. I don't find my bottleneck in coding to be how fast I can write code, but architecture and design.

[@montoyland]

@@simondev758 Hahaha! I like your characterization of coding in JavaScript as a sort of "wild-west", (i.e. code and detonate). As you well know, 90% of programming is debugging and this is why I find using Typescript to be invaluable, as the error messages have a surgical precision that plain JavaScript lacks. Even better, most errors are flagged by the IDE before the program is even run. But where it shines most is when you are working with someone else's library representing unfamiliar code, and voilá! it's almost like magic when you strike the "." key and all the object's available methods and variables pop up for you to choose from. In this sense, an unfamiliar API becomes almost self-documenting, eliminating the need to constantly consult the docs to see how to do this or that. I will port some of your game code to Typescript and post to GitHub so that you can make the mental mapping required to convert from JavaScript to Typescript. With your deep knowledge of C++ I'm sure it'll be a breeze, with the added benefit of "look ma, no pointers!" I find I am more productive in Typescript and, as you note, gone is that feeling of dread that you have irretrievably blown up your code at some point, obviating the need for endless console.logs to track down your mistake! :-)

[@antoniofuller2331]

@montoyland cool story, could use some aliens. I'm not saying it was the aliens, but it was the aliens

[@Prydaxify]

Why do we need to apply a quaternion rotation on the lookAt point?

[@sumanboi]

can u do a physics world tutorial with ammo js or something like that

[@simondev758]

Good idea!

[@James-uv7zt]

could you do these with react-three-fibre?

[@simondev758]

Sure, I'll try to do one soon

[@P-Squiddy]

Maybe this is answered elsewhere, but why the change in constant for Math.pow? You're using .001 in "production" but .3 in "test".

[@MarvelAnchor]

how to change the character

[@JacksonMilesSpindle]

How do I access ur github source code? I just get a black screen and it says blocked by CORS policy in the chrome console

[@simondev758]

Just need to visit github and download, there's nothing special about the setup. No idea why you're getting that error, what are you doing?

[@shrishty4487]

PLEASE HELP! I was adding raycasting for a task but the function shows error: unsupported camera type. I consoled this._camera outside and inside the onMouseDown function and realized that this._camera is undefined inside the function but consoles well outside it. I am very confused. Please help.

[@blackzy1426]

I love your content and your videos but there remains something unknown. I partly succeeded in understanding your code except that I would like to add a jump and I have a problem. The animation works well but it is impossible to make the character go up or if it goes up it never stops

[@rogerthedeveloper8664]

What is timeElapsed from?

[@aliumar7479]

how do we run three js i use sublime text for vs code to open their are some problems can u say how to use in sublime

[@simondev758]

Sublime is a text editor, to run these projects you need to host them using something like nodejs or python.

[@aliumar7479]

@@simondev758 oh ok but how do i do that

[@aliumar7479]

ill search but yaaa if u have a video so u can recemonded me watch

[@erbhagyesh]

How can I reduce his height

[@NuYiDao]

Really want to understand the maths behind the fractional exponent, otherwise brilliant.

[@simondev758]

I ran through it in a comment here somewhere. It was in response to "Pi St", here's the link: kzbin.info/www/bejne/i6axgXuFf8SJa9E&lc=Ugxn0ZB8C65PRPQ-FYh4AaABAg.9G7M3Qxd8n19IemiGjx54-

[@thesejo.6691]

where is code in git hub

[@simondev758]

Look for the one with camera in the name.

[@arpu4967]

github update :> ?

[@simondev758]

Dammit forgot again. Gimme a few mins and it'll be up.

[@simondev758]

Ok should be all available now.

[@maxmax-tw9eg]

class ThirdPersonCamera { constructor(params) { this._params = params; this._camera = params.camera; this._currentPosition = new THREE.Vector3(); this._currentLookat = new THREE.Vector3(); } _CalculateIdealOffset() { const idealOffset = new THREE.Vector3(-15, 20, -30); idealOffset.applyQuaternion(this._params.target.Rotation); idealOffset.add(this._params.target.Position); return idealOffset; } _CalculateIdealLookat() { const idealLookat = new THREE.Vector3(0, 10, 50); idealLookat.applyQuaternion(this._params.target.Rotation); idealLookat.add(this._params.target.Position); return idealLookat; } Update(timeElapsed) { const idealOffset = this._CalculateIdealOffset(); const idealLookat = this._CalculateIdealLookat(); const t = 0.05; this._currentPosition.lerp(idealOffset, t); this._currentLookat.lerp(idealLookat, t ); this._camera.position.copy(this._currentPosition); this._camera.lookAt(this._currentLookat); } } /* It doesn 't work ! */

[@simondev758]

I use the camera in virtually every project, and I know at least a few companies are shipping projects with it, so it most certainly does work. If you can post more details, we can figure out what's wrong.

[@maxmax-tw9eg]

Sorry! It definitely works! I'm just crazy! I was just looking inattentively !@@simondev758

[@yosefefriemrosner5587]

love your vids but coudnt follow the code can you not use stuff like classes you dont make on the lesson

[@simondev758]

This was built on a previous tutorial, so the best thing to do is check the other one out. I try to isolate the code I'm talking about so that it can be understood independently, but it's not possible to be always 100% successful at that.

[@yosefefriemrosner5587]

@@simondev758 what tut

[@simondev758]

@@yosefefriemrosner5587 Check out my video "Simple Character Controller", this was built directly on that.

[@covertsuperxxx1285]

to bad your not good enough to start at the beginning and do a walk through hit me up if you find a good coder

[@thomassloan4695]

Here is the link to SimonDev's repo for this project: github.com/simondevyoutube/ThreeJS_Tutorial_ThirdPersonCamera