Building a Simple First Person Camera

Подписаться 185 тыс.

Просмотров 52 тыс.

50% 1

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.

Наука

Опубликовано:

1 мар 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 123

@simondev758 2 года назад

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

@pranjalagnihotri6072 2 года назад

I love his mindset of building things from scratch, seriously it teaches a lot of what we are actually doing

@justinscotty1450 2 года назад

Love this, the way you explain and actually encourage to try and improve it yourself further is great for aspiring devs!

@cl10k 2 года назад

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!

@felleg4737 2 года назад

Amazing again! Thank you! Whenever I feel strange or unsafe, I come here and feel ok again, or beyond ok.

@aunyks 2 года назад

Looks incredible! Thanks, as always.

@williamjuicebutter6648 2 года назад

Excellent content. This man is brilliant

@buck3213 2 года назад

A masterclass in less than 10 minutes

@dominicforster706 2 года назад

Wow another week, another video i love it and custom FPS controls are really cool.

@koufdell 2 года назад

Excellent content .... your knowledge is pure gold...thx for sharing

@kerel995 2 года назад

Best gamedv tutorials on RU-vid again in action.

@laxytech7387 2 года назад

I swear this was the exact video I needed, I was trying to implement this 2 days ago. Super handy my friend 💪🏽

@kanpekiken2481 2 года назад

Just when I thought he was gone, he comes right back and reignites my flame !!!

@ewwitsantonio 2 года назад

Love to see three.js content. This is so great! Thanks for sharing!

@NorppaCast 2 года назад

I love the content you produce. I would still love to see how you would produce object outlines (cheap vs. good looking).

@simondev758 2 года назад

Ooh yeah outlines are hard, good idea

@Gamewithstyle 2 года назад

Twice in one week? Spoiling us now, aren’t you? Amazing as always man, learned a lot

@sumarto9822 2 года назад

Thank you for the video, i am waiting for this fp camera guide hehe :)

@karimamr775 Год назад

thank you man, really appreciated it!

@patobeur41 2 года назад

always on top !

@JepseStream Год назад

A god amongs men, thank you for all the content!

@thiagodias4513 2 года назад

Simon, very good videos, greetings from Chile

@thiagodias4513 2 года назад

I'm working with modern react libraries like r3f, drei, but your content has laid the foundation for all my mini projects.

@qaiik4212 Год назад

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?

@matthews9298 3 месяца назад

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?

@xlat808 2 года назад

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.

@simondev758 2 года назад

Yeah doing gpu picking is a totally valid way to do this too

@thefutchamp5084 2 года назад

Hi. What's thes best method to compensate for the massive bobbing effect?

@user-fu8pd4cf6v 2 года назад

Great video as always. Can we see more about websocket and multiplayer interactions?

@simondev758 2 года назад

Sure

@aylictal 2 года назад

@@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 :(

@simondev758 2 года назад

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

@aylictal 2 года назад

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

@simondev758 2 года назад

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

@Vooodou 2 года назад

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.

@simondev758 2 года назад

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.

@gentlemanset7559 7 месяцев назад

thx a lot for a lesson where can i find src for this lesson ?

@SDMattos 2 года назад

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.

@simondev758 2 года назад

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.

@michelebazzoli410 7 месяцев назад

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

@matchstick_art 2 года назад

lovely

@bogdanniculae939 9 месяцев назад

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.

@kephas-media 2 года назад

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.

@VladdyHell 2 года назад

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

@simondev758 2 года назад

Yeah I'm starting to put one together, sounds like it's really in demand

@prakashknight9353 2 года назад

I am learning for web dev but I don't know why I'm watching this 😃but honestly it's interesting.

@dannynah156 2 года назад

This is Web dev

@billcolak5253 2 года назад

what is your opinion on web assembly and Unity for web for browser games? Thanks and you deserve more recognition.

@simondev758 2 года назад

Definitely a great way to go, especially since WebGPU will be widely available in Chrome 100.

@AlexWong-lq4pt 2 года назад

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?

@simondev758 2 года назад

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.

@AlexWong-lq4pt 2 года назад

@@simondev758 thanks so much for the quick reply, will do!

@couturepeter 8 месяцев назад

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.

@boot-strapper Год назад

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.

@simondev758 Год назад

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.

@jacktoons3105 2 года назад

Awesome video! Is there any way to implement models into this example?

@simondev758 2 года назад

Yep, I've got a tutorial on loading models: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8n_v1aJmLmc.html

@jacktoons3105 2 года назад

@@simondev758 oh, thank you so much. I’ve been having trouble with importing model’s

@Pavrogold 2 года назад

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

@simondev758 2 года назад

github.com/simondevyoutube/ThreeJS_Tutorial_FirstPersonCamera

@kephas-media 2 года назад

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.

@simondev758 2 года назад

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.

@kephas-media 2 года назад

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

@SolitideSuki 2 года назад

Hi SimonDev, why do you use a '_' at the end for some namingconventions?

@simondev758 2 года назад

I kinda, roughly, when I feel like it, follow the Google JS style guide. google.github.io/styleguide/jsguide.html#features-classes-fields

@lalalexlalalex7420 Год назад

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

@simondev758 Год назад

Lucky you, I just covered this in the FPS video :)

@lalalexlalalex7420 Год назад

Are you a kind of genius, thanks a lot :)

@danielransome Год назад

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

@simondev758 Год назад

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.

@amarokoberle7861 9 месяцев назад

Great tutorial! Where might I find the code for this so that I may copypasta?

@simondev758 9 месяцев назад

github.com/simondevyoutube/ThreeJS_Tutorial_FirstPersonCamera Think it's this one?

@amarokoberle7861 9 месяцев назад

@@simondev758Thanks so much!

@SuboptimalEng 2 года назад

Since no one else asked about this, what's up with all those underscores at the end of variable/function names?

@simondev758 2 года назад

I kinda, roughly, when I feel like it, follow the Google JS style guide. google.github.io/styleguide/jsguide.html#features-classes-fields

@crazyperson123 10 месяцев назад

you are that guy pal...trust me you are that guy

@rox6071 Год назад

JADORE TES VIDEOS !!! 😍

@simondev758 Год назад

merci bcp!

@rox6071 Год назад

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

@simondev758 Год назад

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

@rox6071 Год назад

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

@amirhosein4728 2 года назад

You really like underline😂, right? awesome video thank you.

@simondev758 2 года назад

Thanks! The naming convention is mostly based on the Google JS style guide.

@aliosture5635 2 года назад

Very nice and clean codes, Where is the project source code?

@simondev758 2 года назад

github.com/simondevyoutube/ThreeJS_Tutorial_FirstPersonCamera

@Rssks 2 года назад

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

@simondev758 2 года назад

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).

@fazlizekiqi2324 2 года назад

Great video! Can you please go into more details about quaternion, phi and theta. When u come to that part, you kinda loose me =( .

@simondev758 2 года назад

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.

@fazlizekiqi2324 2 года назад

@@simondev758 thanks for the answer. Will have a look at that.

@jordanwillian9958 Год назад

Can you make a tutorial explain how control a airplane, please?

@OudinAlex 2 года назад

Great tutorial... a little note, you should not use keyCode (for keyboard events) because it is deprecated. Use "key" instead

@simondev758 2 года назад

Thanks, great tip! Didn't know that

@jacktoons3105 2 года назад

Hey, Is there anyway to make a collision system?

@simondev758 2 года назад

Yep, I already have a complete collision system built in a physics engine, need some time to make a tutorial about it :(

@sahilgaur6882 Год назад

@@simondev758 Any update on this tutorial for collision system?

@ironjax3369 Год назад

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

@simondev758 Год назад

"Pointer Lock" api

@ironjax3369 Год назад

@@simondev758 thank you !

@abdelrahman5094 2 года назад

Any recommended resources to understand the math of 3d graphics?

@simondev758 2 года назад

I don't have any off hand, I'll look around and see what's out there, or I could probably make one

@bigmistqke 2 года назад

There is a great 4 part video on 'maths for gamedev' by Freya Holmer here on the youtube. She s really cool!!

@simondev758 2 года назад

@@bigmistqke Definitely recommend her videos, they're awesome!

@1Naif 2 года назад

Linear Algebra 👍🏻

@wreewanmorhee4311 9 месяцев назад

is it possible that get this source code ~ ??

@NickEnchev Год назад

Doom used the arrow keys :)

@simondev758 Год назад

Hmm, was it Quake then that I started using wasd? I can't remember, so long ago

@huzaifashakeel7019 Год назад

Kindly provide this project source code link

@xThree65x 2 года назад

Will this work with React Three Fiber?

@simondev758 2 года назад

I think someone else in the comments said they're going to port this to their react three fiber library.

@xThree65x 2 года назад

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

@madhav220f Год назад

where can we find the source code?

@simondev758 Год назад

github.com/simondevyoutube/ThreeJS_Tutorial_FirstPersonCamera

@RotatingBuffalo 11 месяцев назад

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.

@Fallen_Ninja 2 года назад

SimonBamf

@drewatkison4127 Год назад

YOu didn't check in the last bit? Why?

@simondev758 Год назад

Which bit? It's been a while since I made this video, so you'll have to refresh my memory

@drewatkison4127 Год назад

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

@dscedit149 2 года назад

Tuto main menu

@medoangel8370 2 года назад

Instead of CONDITION ? 1 : 0; U can do +!!CONDITION

@OudinAlex 2 года назад

Why would you use such a cryptic line of code. Code should be readable...

@simondev758 2 года назад

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.