Building a Simple First Person Camera
HTML-код
- Опубликовано: 1 мар 2022
- We'll build an FPS controller in three.js, and add some tips & tricks to make it feel natural.
Support me on:
Patreon: / simondevyt
Follow me on:
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/simondevyoutube/
GKJohnson's Github:
github.com/gkjohnson/threejs-...
We'll walk through some of the basic ideas behind a first person or FPS controller, including the basic math that gets it going as well as some more subtle tricks like head bobbing and focus locking to make it feel more natural and smooth.
What we'll cover:
* Three.js FirstPersonControls, how to use these in a project
* Using Quaternions and Vector translations to create simple first person camera movement
* Using sin waves and focus locking to improve the overall feeling and give it a more organic experience.
Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it. 
Наука
If you enjyoed this, check out my GLSL course: simondev.teachable.com/p/glsl-shaders-from-scratch
Or support me on patreon!: www.patreon.com/simondevyt
I love his mindset of building things from scratch, seriously it teaches a lot of what we are actually doing
A masterclass in less than 10 minutes
A joy to watch!
I really like your pace and how you skip boring stuff and focus on interesting details.
Your content is (always) excellent!
Thank you!
Love this, the way you explain and actually encourage to try and improve it yourself further is great for aspiring devs!
Excellent content. This man is brilliant
Amazing again! Thank you! Whenever I feel strange or unsafe, I come here and feel ok again, or beyond ok.
Looks incredible! Thanks, as always.
Wow another week, another video i love it and custom FPS controls are really cool.
Excellent content .... your knowledge is pure gold...thx for sharing
Best gamedv tutorials on RUclips again in action.
Twice in one week? Spoiling us now, aren’t you? Amazing as always man, learned a lot
I love the content you produce. I would still love to see how you would produce object outlines (cheap vs. good looking).
Ooh yeah outlines are hard, good idea
Thank you for the video, i am waiting for this fp camera guide hehe :)
always on top !
thank you man, really appreciated it!
Love to see three.js content. This is so great! Thanks for sharing!
Just when I thought he was gone, he comes right back and reignites my flame !!!
I swear this was the exact video I needed, I was trying to implement this 2 days ago. Super handy my friend 💪🏽
Simon, very good videos, greetings from Chile
I'm working with modern react libraries like r3f, drei, but your content has laid the foundation for all my mini projects.
A god amongs men, thank you for all the content!
Great video as always. Can we see more about websocket and multiplayer interactions?
Sure
@@simondev758 If I can add, one thing that really stumped me was how to handle live action animation state changes in a multiplayer game so that everyone sees the same thing. When an enemy sorcerer casts a spell, that spell has a timer associated with it. I always fudged that up thinking "I need to send animation states to all clients" but then that would ruin performance completely with too much communication going back and forth and always got stumped by this problem :(
@@aylictal I mostly got around this with my mmo attempt by having a controller on networked entities that basically interepreted the actions from the server. So if a character was casting a spell, it would just know how to start up the right animations, not much differently than if you were controlling them locally.
I'm not sure if it's the best way to do it, but it worked fine for my purposes.
@@simondev758 sorry was away for some time. sounds good but is this 'controller' a part of serverside code that the clients would basically update through inputs?, then the server would echo this entire controller out to all the clients to sync them on a setTimeout? seems like a lot of data necessary, and clients would still be out of sync
@@aylictal Sorry I didn't see that this question was about a live action multiplayer scenario, guessing something more like Fortnite? In that case, I'd read the Valve Source Multiplayer doc as a starting point.
lovely
I'm having a fun time understanding everything you doing and then you start using math and i'm like "wtf is going on" :D
It's clear that i dont need to know about JS and Three.JS. I need math.
Hah ya, there is a lot to know, and I can easily forget sometimes that a detail that I take for granted is a totally new concept for people starting out.
This was a great great video, but I am missing one feature super important to my project. Can you please please please do a tutorial on how do implement cannonjs to block the user from walking through the cube with this?
Ok so for starters, there's another camera controls class called `PointerLockControls`, you can find an example of it in the examples (just search for 'controls/pointerlock'). It comes with forward/back and strafing already implemented. Though I found adding the camera to a parent game object and then moving that was way better if you planned on implementing recoil patterns. Be warned though, this class uses the pointerlock API and that's broken on chrome.
thx a lot for a lesson where can i find src for this lesson ?
Hi @SimonDev,
I've been watching your videos for some time now, and they are a really great source of information. I was wondering if you've ever thought about making a video on using WebGL and video textures. Recently, I've been struggling with performance in this area. Is it possible to create a game where you can have cutscenes, or small video screens with videos from an API, or my local env videos without experiencing lag or stuttering?
Thanks for your work in uploading meaningful content.
Love this video and your content, it's inspired me a lot!
However, just one question: how can you add a little crosshair/reticule to the screen?
You can define a 2nd scene and just layer it there, check out my star wars video, or my Minecraft video, i add reticules in both.
@@simondev758 thanks so much for the quick reply, will do!
Could you replace the ray casting with grabbing a pixel from the depth buffer? I'd love to see a video on making use of the depth buffer. Your post-effects video touched on it a little.
Yeah doing gpu picking is a totally valid way to do this too
JADORE TES VIDEOS !!! 😍
merci bcp!
@@simondev758 i heard from Bruno Simon himself that you worked on the game PROTOTYPE that is one of my favorite game ever !!!!
Also thks you for your tutorial, I was able to create really good THREE.JS scenes for my exams ! (Head bobing is sick !!!).
So i just wanted to say you THANKS with all my sincerity ^^ (sorry for my english).
@@rox6071 Neat, Bruno Simon is an awesome developer, very cool he mentioned me. Yep, I did a lot of the graphics programming there!
Btw, your English is great, no need to apologize. Je suppose que ta langue est le français? J'apprends le français en ce moment.
@@simondev758 XD Oui je suis français ! Et je dois dire que tu te débrouille très bien !! Dont give up 👌💪
Btw XD, i keep thanking you for your awesome videos ! I trying to create my third scene right now and it help me well.
Also i didnt seen you present how to create and generate flora efficiently that can be in adequacy with your content !
I absolutely not telling you to do a video about it XD, but i think it can be a really good help for student in my situation or anyone else.
Do you have any recommendations for implementing some simple collision detection for the camera? So it doesnt walk through that cube in the center, for example?
Hi. What's thes best method to compensate for the massive bobbing effect?
what is your opinion on web assembly and Unity for web for browser games? Thanks and you deserve more recognition.
Definitely a great way to go, especially since WebGPU will be widely available in Chrome 100.
Bro do you have any plans on creating a course on three js, specifically for game dev? I can't seem to find one, I hope you make one
Yeah I'm starting to put one together, sounds like it's really in demand
I am learning for web dev but I don't know why I'm watching this 😃but honestly it's interesting.
This is Web dev
I tried this out and had an issue with the mouse movement control. For me the delta remained when the mouse was still causing an inertia effect in rotation. I had to put a check into place to reset the delltas if the mouse hadn't moved.
I really enjoyed this and learned so much watching it!
Have been trying to import it in my project, but texture.econding and colorspaces appear to be deprecated, so I updated them to texture.colorSpace and SRGBColorSpace, but still not working..
How to fix this?
Thanks!!
Awesome video! Is there any way to implement models into this example?
Yep, I've got a tutorial on loading models: ruclips.net/video/8n_v1aJmLmc/видео.html
@@simondev758 oh, thank you so much. I’ve been having trouble with importing model’s
you are that guy pal...trust me you are that guy
Man, I was wondering why you never did this earlier, I was working on a first person demo using threejs and the first place I rushed was your channel. But anyways, let me get into the meat of the video, comment section's already hyping me up.
Lemme know if you think I should follow this up with more FPS stuff. Thinking of building out a full fps game bit by bit, tutorial by tutorial.
@@simondev758 of course, rigging up hands is a good place to start, I just have a floating gun. Impact effects, muzzle flash, smoke effects. There's so much to cover lololololol.
hello Simon, thanks a lot for sharing such good content, I have a question for you, imagine that I want to make the camera collide with the cube in your scene, what is the best way to do it ? Have a great day
Lucky you, I just covered this in the FPS video :)
Are you a kind of genius, thanks a lot :)
Great series! Quick question, why would the downloaded github project for you first person camera not work for me when I try to open the index.html file after uncommenting the initialize parts? I get a black screen in the browser.
Are you hosting it locally, or did you just try to open the index.html file? That won't work, you need to host the project using something like python.
Great tutorial! Where might I find the code for this so that I may copypasta?
github.com/simondevyoutube/ThreeJS_Tutorial_FirstPersonCamera
Think it's this one?
@@simondev758Thanks so much!
Can you make a tutorial explain how control a airplane, please?
Great tutorial... a little note, you should not use keyCode (for keyboard events) because it is deprecated. Use "key" instead
Thanks, great tip! Didn't know that
You really like underline😂, right?
awesome video thank you.
Thanks! The naming convention is mostly based on the Google JS style guide.
Great video! Can you please go into more details about quaternion, phi and theta. When u come to that part, you kinda loose me =( .
Sorry, I move a bit quickly sometimes. I would recommend reading about "spherical coordinates", I kinda alluded to them in the wikipedia overlay.
As for quaternions, they're a whole other thing, compact way to represent 3d rotations. It's a pretty crazy subject though, so I'd recommend googling some tutorials on those. As mentioned in the video, quaternions just happened to be the way I did it, off the top of my head. There's no rule that says you have to use them though, a Matrix4 will do just fine, or even using the aforementioned spherical coordinates to recreate the cartesian vector and turning that into a lookAt() call would work. Whatever floats your boat.
@@simondev758 thanks for the answer. Will have a look at that.
Where exactly can I find the code for this tutorial on your github? I can't find it. Im interested on adding a crosshair in the center of the screen to my project
github.com/simondevyoutube/ThreeJS_Tutorial_FirstPersonCamera
Since no one else asked about this, what's up with all those underscores at the end of variable/function names?
I kinda, roughly, when I feel like it, follow the Google JS style guide.
google.github.io/styleguide/jsguide.html#features-classes-fields
the camera definitely should be coming from the head, and not from the chest. otherwise you could end up with other players appearing much taller than you, or even appearing taller than yourself if you looked in a mirror or other reflective surface.
Very nice and clean codes, Where is the project source code?
github.com/simondevyoutube/ThreeJS_Tutorial_FirstPersonCamera
Simon! I just quit my software job (been at it 7.5 years) and have about 2 years of runway. I want to try my hand at making an indie game. Most of my experience has been web/javascript (front end and backend). Do you think I should try to make a game in js? I know I want more control than all the black magic baked into unreal or unity. Was also considering rust, but was concerned I wouldnt be productive enough in it. What are your thoughts? Oh and it will be 2d sprite based.
2d sprite based, you're probably fine in JS. If I was doing a 2D game, I'd either go with a big engine, since they handle a lot of things for you (like mobile compilation, etc.), or JS + some 2d lib + mobile framework, ie. Phaser + Ionic, haven't tried them myself, but heard good things.
Apologies if you’ve answered this before; why do you use jS over another language, and why not Typescript? I find your videos super interesting! Thanks
I spent around 15 years doing C++ in game development and at Google. I appreciate the simplicity of JS, coupled with the "pretty decent" performance. You can do a lot with very little effort. I like that.
I share the same childhood fps games with you :D and i also wanted to share that at one point (~2015ish) i was experimenting with browser 3D with CSS and found Keith Clark's blog which got me so inspired that i ended up making my own 3D editor which i use in production till this day. Fun fact: to make FPS camera there i ended up translating the whole world instead of the camera (it feels just as) - and it works :D
Hah that's a neat way of doing it. There's really no wrong way, whatever works. That trick is used in major games too, especially when you're say, on something that's supposed to be moving (like a train).
Doom used the arrow keys :)
Hmm, was it Quake then that I started using wasd? I can't remember, so long ago
Hi SimonDev, why do you use a '_' at the end for some namingconventions?
I kinda, roughly, when I feel like it, follow the Google JS style guide.
google.github.io/styleguide/jsguide.html#features-classes-fields
is it possible that get this source code ~ ??
Any recommended resources to understand the math of 3d graphics?
I don't have any off hand, I'll look around and see what's out there, or I could probably make one
There is a great 4 part video on 'maths for gamedev' by Freya Holmer here on the youtube. She s really cool!!
@@bigmistqke Definitely recommend her videos, they're awesome!
Linear Algebra 👍🏻
Hey, Is there anyway to make a collision system?
Yep, I already have a complete collision system built in a physics engine, need some time to make a tutorial about it :(
@@simondev758 Any update on this tutorial for collision system?
Kindly provide this project source code link
how do you make the cursor "disappear"? whenever I make this I cannot move infinitely cuz my mouse gets stuck on corner of my screen
"Pointer Lock" api
@@simondev758 thank you !
Will this work with React Three Fiber?
I think someone else in the comments said they're going to port this to their react three fiber library.
@@simondev758 Looked through the comments didn't see any place anyone said anything about porting this. I am guess its possible since R3F really just sits on top of the Threejs lib
where can we find the source code?
github.com/simondevyoutube/ThreeJS_Tutorial_FirstPersonCamera
SimonBamf
YOu didn't check in the last bit? Why?
Which bit? It's been a while since I made this video, so you'll have to refresh my memory
@@simondev758 The very last scene - 8:50 + I cloned the project, ran it and still see the checkered floor and the head bobbing is wild.. Which is what you refined and then showed start at around 8:48 or so
Tuto main menu
Instead of
CONDITION ? 1 : 0;
U can do
+!!CONDITION
Why would you use such a cryptic line of code. Code should be readable...
Guessing this is basically cast_to_int(cast_to_bool(condition))?
Neat trick, although yeah I'd agree with Alex.O, I don't find that intuitive, and I'm betting enough people would agree, that I wouldn't use it unless I had a good reason.