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
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.
Could you solve a doubt of mine? How would you go about implementing a simple third person pov camera. Like an example scenario would be a small sphere moving along some line on some platform, how would you implement a simple button that switches from the general camera view to a third person pov camera which follows this moving sphere and back? Any help or guides would be greatly appreciated
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!
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. ;_;
How would you go about rotating the cam around the player or lookat with the mouse. I tried messing with the offsets, but it would rotate not a full 360, but under 180 and star zooming out not crossing around the look at.
@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?
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
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.
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 :)
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.
@@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!!
@@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.
@@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?
@@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
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
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 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
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.
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.
@@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! :-)
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.
I ran through it in a comment here somewhere. It was in response to "Pi St", here's the link: ua-cam.com/video/UuNPHOJ_V5o/v-deo.html&lc=Ugxn0ZB8C65PRPQ-FYh4AaABAg.9G7M3Qxd8n19IemiGjx54-
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.
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.
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
which mario game is that at 1:26
This is the type of content on youtube that is pure gold. Just found your channel, thank you for all of this!
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.
These are my favorite vids to start off the week with, I always learn so much
That's awesome, really glad you're enjoying them!
You're just one of the most greatest teacher & developer who i've seen in youtube so far!
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.
This tutorial is gold, thanks man for your work. Really helped a lot of people.
np glad you found it useful
Thanks man for all your videos, they're really helpful and you are kinda funny, love ur content
What is the .Position and .Rotation? I'm copy and pasting in the "get Position" stuff but "get" is not defined? Please help!
awesome video you saved me hours for uni project
Thank you for the valuable lesson. Its very helpful.
Thanks again. I tried this one too and it works fine for my needs ... just try to get the y-axis movement.
Ooh yeah I should really add some jumping, maybe a future tutorial.
@@simondev758 maybe with running up stairs?
The google suggested searches cracked me up
still struggling with the third method explanation. I use the second method. works well so far.
Incredible video! So much valuable info!
Could you solve a doubt of mine? How would you go about implementing a simple third person pov camera. Like an example scenario would be a small sphere moving along some line on some platform, how would you implement a simple button that switches from the general camera view to a third person pov camera which follows this moving sphere and back? Any help or guides would be greatly appreciated
Thank you very much, this is a pretty nice tutorial
Awesome stuff! As someone who isn't a freaking genius I wish some things were explained more thoroughly, but nevertheless I am learning 😁👍
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!
i just suscribe you are amazing from now and forever one of my favorite
Thank you, great video! Additionally to be able to move the mouse for the player to follow the rotation would be awesome.
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.
I'm writing a meta program via youtube videos, with function calls out to other videos.
@@simondev758 lol I believe you
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. ;_;
How would you go about rotating the cam around the player or lookat with the mouse. I tried messing with the offsets, but it would rotate not a full 360, but under 180 and star zooming out not crossing around the look at.
@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?
Amazing tutorial! Tanks for that
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
Also I have been loving all of your videos. Thank you!
I'll add it to my ideas doc!
Why do we need to apply a quaternion rotation on the lookAt point?
could you do these with react-three-fibre?
Sure, I'll try to do one soon
Maybe this is answered elsewhere, but why the change in constant for Math.pow? You're using .001 in "production" but .3 in "test".
can we have a tutorial of first person cameras?
Yes!
really thanks Simon
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.
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 :)
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.
@@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!!
@@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.
@@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?
@@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
Can someone please tell me how the mouse input is being handled??
can u do a physics world tutorial with ammo js or something like that
Good idea!
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
amazing. can you teach us how to make survival game using three.js too? character jumping, shooting, inventory like that :)
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!
Some sort of hierarchical camera setup, where you have a 3rd person camera, and a free look as a child would probably work.
@@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
@@nanberg8did you figured it out how to do it ?
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
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?
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.
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.
@@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! :-)
@montoyland cool story, could use some aliens. I'm not saying it was the aliens, but it was the aliens
What is timeElapsed from?
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
Sublime is a text editor, to run these projects you need to host them using something like nodejs or python.
@@simondev758 oh ok but how do i do that
ill search but yaaa if u have a video so u can recemonded me watch
how to change the character
Thank you so much!
No worries! Let me know if you have ideas or suggestions for future videos.
Thank you!
np
@@simondev758 Did not know about the Math.pow() trick. Even unity forums often get these camera lerps wrong!
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.
Yeah, greatly appreciated!
But now I want to know how the pow trick works and why!
How can I reduce his height
Really want to understand the maths behind the fractional exponent, otherwise brilliant.
I ran through it in a comment here somewhere. It was in response to "Pi St", here's the link:
ua-cam.com/video/UuNPHOJ_V5o/v-deo.html&lc=Ugxn0ZB8C65PRPQ-FYh4AaABAg.9G7M3Qxd8n19IemiGjx54-
Thanks you so much for your videos (L)
Glad you're enjoying them
where is code in git hub
Look for the one with camera in the name.
github update :> ?
Dammit forgot again. Gimme a few mins and it'll be up.
Ok should be all available now.
thanks babe
What I’ve been waiting for! Lol 🙏🙏🙏
Hope you found it useful!
💯
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 ! */
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.
Sorry! It definitely works! I'm just crazy! I was just looking inattentively !@@simondev758
love your vids but coudnt follow the code can you not use stuff like classes you dont make on the lesson
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.
@@simondev758 what tut
@@yosefefriemrosner5587 Check out my video "Simple Character Controller", this was built directly on that.
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
Here is the link to SimonDev's repo for this project: github.com/simondevyoutube/ThreeJS_Tutorial_ThirdPersonCamera