Simple Character Controller (using Three.js/JavaScript)
HTML-код
- Опубликовано: 12 сен 2024
- Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/sim...
In this project we're building out a simple character controller in three.js and JavaScript, using a finite state machine. The goal here is to build a little controller for characters in game that can conceivably be drop-in ready and used for third person movement in projects. We'll support a variety of movements and show how to seamlessly transition between them.
This is part of a series of Three.js tutorials aimed at beginners, teaching you the basics from the ground up. We've covered quite a bit in this beginners course, beginning with simple worlds and moving on to adding characters and objects. This project should get you start on adding simple player driven, or AI driven, characters using this basic character controller.
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:
* Three.js's Animation System, including examples using AnimationClip, AnimationAction, and AnimationMixer.
* Architecture considerations when building out the controller class, how to decouple things in a clean way for future reuse.
* Finite State Machines, what they are, and how they can be applied effectively in this situation. 
Наука
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
For anyone having their model from Mixamo weirdly teleporting when walking or running:
Make sure to have the "In Place"-option ticked when downloading the animation!
thank you kind person
I have searched the complete internet except you no one has explained the character controller with the keyboard keys .. thanks ..I have to decide the class component to functional ....still thank you very much ..hope it will work for me ..
Simon, you're tutorials are the best! They are information-rich, but straight to the point and easy to follow. Your tone and wry sense of humor also make them a joy to watch. I'm having a blast doing some of these with my son as I teach him to code while keeping him engaged with a subject matter that he loves. Thank you for your time, dedication and generosity in sharing your knowledge!
Thank you so much Simon for these videos, I started learning three js and have big projects in mind, found this video tutorial really useful and especially the one when you created the RPG game, still need to get fully confident with javascript classes as I've been only using functions so far, please keep it up!
I just want to thank you so much for all these tutorials. I’ve been learning a lot.
I’m using this here to make a short 3rd person shooter!
I hope you can make a tutorial on something similar soon lol
Great idea! I've been wanting to do a quick shooter of some sort.
Thank you so much for sharing all your experience, I'm learning how to code on threejs and I know how to use threejs but I got lost when working on the architecture of the app, your videos and your code on github are amazing, by watching your videos I'm finally learning how to create an architecture, thank you!
awesome tutorial, would love to see you cover this whole thing more in detail as there are basically no such advanced tutorials out there
The quality of the videos are great Simon! subbed :)
Awesome, happy to have you around!
The Whole contents of your tutorial is sooooooo helpful, please keep making tutorials!!
i just want to let you know i greatly appreciate your work!
Wow !!! You deserve more followers. The example works like a charm.
thx!
Hopefully this will help for my FInal Year Project. Much respect for your sharing sir! keep posting more!
Your tutorials are great, good bless you friend!
Thanks for an excellent and educational video 🙂It really helped when adding animations to my characters. Your finite state machine design made the animations much easier to implement.
criminally underviewed
Great video as always, thanks for creating it!
A few ideas for future videos:
1) Add clutter to terrain - e.g. rocks, tree - perhaps via simplex noise driving Poisson disk distribution.
2) Collision detection with terrain and clutter - octree, raycasting to collision vertices, collision resolution, etcetera.
3) Pathfinding on terrain with clutter - A* / Voronoi / dynamic nav mesh?
With those topics I think you'll have covered everything required to make a basic game engine in Three.js.
Thanks again, looking forward to your future videos!
Oooh great ideas, adding them to my list.
I've also been kicking around ideas for videos that focus less on coding. Things that draw on my experience. I was technical architect for a big studio (I made technical decisions and roadmaps for the entire company), and a tech lead at Google. Stuff like development process, requirements, how to approach problems, what interviews cover, etc.
Like always... good stuff!
ty!
0:09 when code runs in first execution
Sorry, what?
@@simondev758 well I was referring to the dance
@@AllAboutCode lol man, I had a complete brain shutdown and had no idea what you were saying
Thanks a ton, I am working on my own javascript threejs game and was bugged by the transitions. Loved it would definitely try this.
@0:36
Where have I seen that walk before? Ah yes people coming out of Taco Bell.
It would have been nice to see a review of the State class
awesome video! i was wondering if you could go into more detail on the purpose of creating the character controller proxy?
I didn't like the idea of giving direct access, wanted to decouple the classes, but ended up being overthought and I never removed it.
Hey Simon, thank you for making all these videos, your fucking awesome man. You have been my go to for learning 3D dev. I was wondering if you have a video explaining the math that goes into moving the character? If not that could be a really good video if you ever got the time too. Thanks again man, stay up.
I've never seen as good as this video explaining action mixer. Can you make a video on handling the animation of a big project with many moving entities? I mean how would you manage all the animations in all your scene efficiently
I have a few games where I already have multiple animated things, is that what you're looking for?
really thank and respect you
I love these videos, thank you :)
np!
have you thought about teaching in react-three-fiber?
love the tutorial too btw
This is great. It took me a good amount of time to figure out something similar on my own. Blending the animations was a challenge for me. I enjoy the challenge. This helped me learn some ways to optimize my code. Thank you for sharing your knowledge.
Possible video request? Mash this with the How many AI agents can Javascript handle. I've been working on a multiplayer project for some time and I can only manage to get about 3 or 4 before It gets really laggy. How many do you think is possible using node js as the server? Thanks again.
Good idea, I've had a small mmo on my list for a while for when I have some time. I've written the client/server for a few in the past, they had large player bases but weren't too complex.
Thanks for the tutorial , Just a doubt if we can change body dimensions of the model using three.js
Just set the scale.
Amazing content!
Happy you like it!
Cool!
your the man
Hi Simon, would you do a video on how to create an NPC character from scratch with ThreeJS?
nice video, thanks
np
Is there a way to detect a joypad (generic GENIUS gaming pad?) to do this same thing?
Yeah, I set one up in my star wars game, you can take a look at that.
Hey, I'm very new to threejs and web development in general. My question is, are those properties like _params, _manager, etc. already defined somewhere or are they user defined?
I define them in the project.
Brother can you tell me, from where you get these fbx animations (dance, running etc) as a separate files. I download from deepmotion but they are within the character. I also need separate files.
I want the character to walk by default, and run when pressing shift. But the transition from walk to run is weird. A very short run animation is shown only after the shift keyup event fired. But the transition from run to walk is fine.
Sorry if I missed this in a previous video but how can you tell if an animation is compatible with your model?
I don't check that, the animation was downloaded with the model from Mixamo, so compatibility was virtually assured.
There may be internal checks on Three.js's part to ensure compatibility between the skeleton and animation, but I didn't do anything extra.
@@simondev758 - That makes sense. Thanks!
Hi, SimonDev Nice tutorial, and thanks for the lessons. How would one implement functionality where one can have a search bar and on typing the name of the animation and pressing enter the animation is fetched and played instead of pressing certain keys on the keyboard?
I think you need to look at how the dance animation is triggered, and then just move that code to when your search bar triggers.
@@simondev758 Thank you will try look into it.
Now I'm working with fire! What's the deal with all the underscores in your code? (probably a very junior question)
I've been super inconsistent with coding style, that's all. I try to follow the Google style guide in later videos.
@@simondev758 Those freakin psycopaths lol. Interesting, I'll check out this style guide.
Do you have a PayPal for donations? These are great tutorials. One thing I've never quite liked about FSM is that they don't allow for a combination of states without making ad hoc combined states for a specific grouping. I've used hierarchical state machines before which are pretty flexible but not perfect. What are other alternatives you're aware of?
I've got a patreon (www.patreon.com/simondevyt), I never turn down coffee/beer. Can't say that I know offhand something better, but I can poke around some papers and stuff to see if anybody has something better.
@@simondev758 no PayPal or Venmo? I'm not a huge fan of Patreon
@@ralusek Nah unfortunately not. It's cool if you're not big on Patreon, I'll look into other options at some point too. Until then, stick around and enjoy the videos either way!
Hey I'm beating my head against ammo js and I wondered if you have any insight into using btKinematicCharacterController? I'm not finding anyone who has used it in ammo js, but I may also just not be too bright lol
Probably next video
Great stuff! Really unique. Subbed :) Watched dozen of your videos and can't find any explanation of movement algorithm used in Update() method. Especially using timestamp as multiplier and _A / _Q / _R stuff. Am I missing something? Can you point me to any tutorial or documentation?
Ah it's just applying rotations from key presses and some velocity to move the character around, sorry didn't cover that.
Can you do similar videos for react three fiber?
HeySimon.
Thanks for such an insightful video.
I am adding 3 to four more assets to my scene like car, tree, building etc. But when i move character it passes through my other assets such as car, building. Can you please add colission in the same example.
Thank you in advance
Hey, how can I use the controller for AI character input? Do you have plans to make a video on that? Thank you
this good hen you change the states with keyboardinput but how do you do it for a character that is not controlled by the player
is there explanation for _RAF and _Step?
i try to add backward animation from mixamo, but when the animation start it won't stop, any idea ?
hey my character kinda walks then jumps back and continues the walk animation (same with the run animation), i think this is a timing issue with the mixer, based on how im updating the mixer. any tips on how to fix this?
Dear Simon, I'm looking for speech control for character in three JS. Please help me to find out one example how can I get that not using AWS Sumerian host. Thank you.
does this work in the local space or global?
Hey. I have used this tutorial to make one character move, but I have ran into a problem. Basicly the character runs very fast, and after like half a second it gets send back. I think the animation is way faster than the position change, so the animation goes fast but he gets sent back to where his position is. I dont know how to sync the two. Any1 can help?
It sounds like the animation you're using also animates the character's position. Ie. the character actually moves forward as part of the animation. If you're using mixamo, there's an option when you choose an animation to make it "in place", so they'll do the walk animation but in the same spot. Then you can change their position from code.
omg thx spent the whole day trying to fix this bug
How would you convert this for touch screens / mobile?
thanks
I'm confused
How would I make the character jump?
this is so funny 🤣
heh
i demand an update method explaining as i don't exactly understand what's going on in the code , if you can speak of the details regarding the calculations you've done and the reason behind them.
I find it a little hard to understand especially from the variable name choices (_R,_A,ect).
So if you're free to make a quick tour on that function it would be appreciated , i know it might be tedious to remember a logic you've made three years ago (probably more depending on you github) , or maybe you've discovered a better way to recreate it even for all we know.
Aw man , just checked your lates video and the gap between them tells me you're tightly busy.
Well gonna have to figure it out myself , thank you for this video and code nonetheless , having a good code reference helps more than one thinks.
Your efforts are appreciated mate.
I'm confused, is parent a keyword in javascript?
Nah it's a param I passed in.
Can u plse make video of how to upload 3d model to website, and fix AR view option to it
Ooh that would be fun.
@@simondev758 ss, When can i expect that video, Iam eagerly waiting for that
@@powerpawankalyan7749 I'm not sure, I tend to try to have topics already in progress, so maybe a few weeks if I end up trying to take this on.
@@simondev758 iam waiting
I would love to see you explore godot engine.
i downloaded the files from the repository and every browser display them completely black. What happened?
They need to be hosted, easiest way is to do it locally using vscode, python, node, etc. Can't just open it in a browser.
@@simondev758 ohhhh okay, most tutorials about "3d in browser" just shows all steps but they rarely tell u the hosting par. Thank you!
Ok this is going to sound weird but
I was messing with the code you provided on GitHub and I mirrored the zombie in blender on its local z axis and now the plane lost its shadow and the zombie is full of light
Any reason for this?
Assuming your mesh is still ok and not inverted or something weird, might be the material has changed.
These are random guesses. Honestly still getting grips on Blender myself, spent most of my professional career using Maya/3ds Max.
Could you do a video for adding animations from custom blender models that can't be uploaded to mixamo?
have you tried to export into the files settings navigation ?
What will be the velocity.z calculation of jump?
Just apply an impulse of some kind, depending on the effect you want.
I can make a note to make a video that includes a jump in the future, if that would be helpful?
Please do that would be so much helpful. Thank you for your response.
Can you explain the entire update function which is in the BasicCharacterController as it has velocity calculation and some other stuff I didn't get it
Once you have loaded in a model e.g the zombie could you add .json motions to it?
Not quite sure what you're asking, but if you're asking if you can load an animation separately from the model then yes you can totally do that.
@@simondev758 Yeah that was it, thanks for the response
subscribed
Awesome, got anything you want to see covered in the future?
Also, I am unable to load any other file I changed the file path and everything but it gives me a warning that "FBXLoader.js:669 THREE.FBXLoader: ShininessExponent map is not supported in three.js, skipping texture." and unable to load the function
Sounds like a problem with the exporter, but I've heard the FBX one isn't prioritized vs the gltf exporter. Where did you get this model? Have you tried a gltf instead?
From mixamo and no I didn't try the gltf
I'd contact three js at this point, maybe file a bug about it.
@@simondev758 Thank you so much for everything and for replying. Your tutorials are amazing plz don't stop making them. I really need to learn a lot.....Thank you so so so so muchh....!!!
@@thakkerrpiyu3815 No worries, keep learning and don't be shy about asking questions. Can't promise I can answer every one of them, but I'll still try.
Is there full code source maybe?
Github
Thanks for the tutorial. I would love to see the code and follow it myself. Can you place the code on your github?
Oops didn't upload it, fixed. Are you able to get it now?
@@simondev758 Awesome. Thank you so much!
@@simondev758 Yes, thank you! This was very helpful, and definitely answered many of my questions. Thanks again!
do you have the link to the source code for this?
Yep, forgot to upload it. Can you see it on github now?
@@simondev758 yah thank you