Three.js 3D Game Tutorial: In-Depth Course for All Levels

  Рет қаралды 109,097

Chris Courses

Chris Courses

Күн бұрын

Ready to create amazing games? Join chriscourses.com to learn, grow and thrive from over 100 videos, quizzes and code challenges: chriscourses.com/
Project setup code snippet: chriscourses.com/courses/thre...
GitHub source code: github.com/chriscourses/three...
Demo: chriscourses.github.io/threej...
00:00 Intro
00:52 Project setup
7:14 Materials and lighting
18:24 Shadows
20:59 Gravity
54:10 Movement
1:10:22 Full collision detection
1:29:16 End game senario
1:41:24 Enemy spawning
1:48:50 Fine tuning

Пікірлер: 91
@ChrisCourses
@ChrisCourses Жыл бұрын
If I missed any cards or anything, please lmk and I'll be sure to add them in. TY! Otherwise, hope ya'll enjoy this long awaited vid.
@isaacqadri
@isaacqadri Жыл бұрын
Thank you, Chris 🎉🙌🏻
@evilt521
@evilt521 Жыл бұрын
Is it possible to change the cube as a gltf 3d model without change other code? or I need to rewrite all the function in class Box?
@anikatasnimaurin4499
@anikatasnimaurin4499 10 ай бұрын
when the green box falls from the platform ,the screen should be paused also.
@alykhan8359
@alykhan8359 9 ай бұрын
Is it possible to change the cube as a gltf 3d model without change other code? or I need to rewrite all the function in class Box?
@edwinramirezmedina9756
@edwinramirezmedina9756 6 ай бұрын
​@@evilt521😊
@meta91rbx
@meta91rbx 2 ай бұрын
Who else woke up to this?😂 Edit: woah thx guys for the likes!
@xk0tika
@xk0tika 2 ай бұрын
yo me too😂😂
@thoi99
@thoi99 Ай бұрын
Yo what how is this a thing I’m not even into coding at all 😂
@evanmiller1682
@evanmiller1682 Ай бұрын
No way this also happened to me 😂
@NirvanaSkulls
@NirvanaSkulls Ай бұрын
I don't understand how I went from serial killers to this 😂😂😂
@bengooo2287
@bengooo2287 Ай бұрын
LMAO
@kennyfully88
@kennyfully88 8 ай бұрын
Thank goodness you're such a good instructor, Chris. This is exactly what I need to know for a project I'm working on.
@arjunbhandari2669
@arjunbhandari2669 8 ай бұрын
I am pissed at how underappreciated this is. I think it's all such a niche requirement that all haven't stumbled on your work yet! Glad you're making this. Joined as ur patreon, keep going, keep growing!!
@saronarabeds6517
@saronarabeds6517 Жыл бұрын
Thanks a lot chris, what a great thing to find someone gives you precious knowledge for free like this amazing youtuber !!!
@noahr1545
@noahr1545 Жыл бұрын
Hi Chris! This is such a great tutorial as always and you really helped inspire me to try and dabble into the world of game development and showed me how possible it actually is. At first I thought it was impossible but you've shown how easy it can be. Thanks so much for this and I might be interested in getting your Chris Courses subscription.
@nicolaskeroack7860
@nicolaskeroack7860 11 ай бұрын
Same learning how to make a canvas
@creativeed6788
@creativeed6788 10 ай бұрын
Hey man, just starting out the tutorial, but I checked your website and just wanted to appreciate what a platform you put together, so many tutorials, incredibly polished work, and all very accessible to everyone. Thank you. Great work!
@yoanurag
@yoanurag Жыл бұрын
thank you from the bottom of my heart for everything that you do. As a broke student Your videos have provided me with invaluable knowledge and insight that I wouldnt have been able to access otherwise the fact that you have shared your expertise and experiences with us for free is truly commendable and I am grateful for your generosity your videos have been a source of inspiration and motivation for me to keep learning and growing and I cant thank you enough for that im still learning 2d canvas , but this looks magical thakyou
@ChrisCourses
@ChrisCourses Жыл бұрын
I see your comment and am very appreciate for it. Glad I've helped you learn and hope to keep doing so, thanks for tuning and watching, even if my posting is inconsistent 😂
@edwinramirezmedina9756
@edwinramirezmedina9756 6 ай бұрын
Un 🎉I🎉🎉🎉🎉🎉😂😂
@diegocandido5361
@diegocandido5361 Жыл бұрын
great tutorial. class box idea is amazing
@garrettmandujano2996
@garrettmandujano2996 10 ай бұрын
I sincerely appreciate you making this course available free here, thank you sir
@JSLegendDev
@JSLegendDev Жыл бұрын
Looks awesome! Thanks for making this.
@werwolfischekatharsis3266
@werwolfischekatharsis3266 Жыл бұрын
what a tremendously good timing! I bought bruno simon's threejs course a week ago, have planned to book a course from chris afterwards and hoped he release another threejs video again someday(btw great stuff!).. et Voila! Merci beaucoup!
@ChrisCourses
@ChrisCourses Жыл бұрын
No problem, I wanted to make some games using normal Three.js and not having to get into the react three fiber stuff. I'm a vue user, so naturally, I'm adverse to the react stuff 😆
@HuynhLuong227
@HuynhLuong227 Жыл бұрын
wow, long time no see, verry happy when see you come back, especial make game with threejs
@wang-g7744
@wang-g7744 Жыл бұрын
Well done, thank you for sharing. It's a very clear tutorial❤
@syuo5051
@syuo5051 8 ай бұрын
Thank you, Chris! It is awesome.
@deFrontComOFer
@deFrontComOFer 5 ай бұрын
To get the camera position, you just need to console.log(camera.position) inside your animate function (loop function) , then you can move the camera around with the mouse and just pick the values from the console, hope it helps someone!!
@theblueplanet3576
@theblueplanet3576 9 ай бұрын
This was a truly masterclass tutorial 👌
@anmolchauhan3822
@anmolchauhan3822 Жыл бұрын
It was really fun and thank you for this video broo!!
@chrystian4517
@chrystian4517 Жыл бұрын
thank you very munch for the great information in your videos!
@gabluz
@gabluz 10 ай бұрын
Goddamn! I was looking for this tutorial everywhere!!!!! Thank you so much!!!
@worldbest3097
@worldbest3097 Жыл бұрын
wow, where you have you been!! waited for so long time!
@kienboy9999
@kienboy9999 Жыл бұрын
glad you came back. wish you well. your videos are amazing. keep do good job
@raystone06
@raystone06 Жыл бұрын
Amazing course Thank you, support from ivory coast 🇨🇮!
@ChrisCourses
@ChrisCourses Жыл бұрын
Thank you sir from the ivory coast 🙌
@Hawkborat
@Hawkborat Жыл бұрын
I can't figure out how to perfect the jumping, it works fine if you tap it, but if you hold the jump button or spam it it will let you fly. Which takes away the point of the game. Anyone know how to fix that?
@--bountyhunter--
@--bountyhunter-- Жыл бұрын
love your vids man..❤️ underrated
@321123580
@321123580 Жыл бұрын
Great tutorial, thank you
@manukyanq
@manukyanq Жыл бұрын
Maaan, your content is more interesting that all chatGPT related topics 😂😂😂
@ChrisCourses
@ChrisCourses Жыл бұрын
I'm sick of it too, only been a few months and I can't take anymore 😂
@poki6041
@poki6041 11 ай бұрын
what is "group" in update(group) for me that do nothing D: for me its working event without ground in update(ground)
@hihahahuhujs
@hihahahuhujs Жыл бұрын
Love your video Please make more video about three.js game😊😊
@Engineerly
@Engineerly 4 ай бұрын
Hey Chris, how can i add the condition -> if our cube falls off the edge(left or right), it should still be game over!!
@HoldenTudiks81
@HoldenTudiks81 Жыл бұрын
love all the projects❤. On this project when I run the project from( VsCode run debug chrome) everything works. But when I run the project on Live Server I'm getting an error ( THREE.WebGLRenderer: bgl_triggerblock is not defined) (Uncaught ReferenceError: bgl_triggerblock is not defined) is there a way to fix this error. I added a H1 and it shows on the screen just not any of the THREE stuff. I can also keep pressing space to stay in the air how would I prevent that?
@meme-vw1vi
@meme-vw1vi Жыл бұрын
10/10 vid as always
@robertn2997
@robertn2997 Жыл бұрын
Cool video, 3D in the browser really interest me. I'm going to watch the full video in my weekend. I have only one question, why is almost everyone on KZfaq using Three js for there tutorials instead of Babylon.js?
@ChrisCourses
@ChrisCourses Жыл бұрын
Only reason for me is because I started with Three.js and don't really want to switch off something I'm comfortable with. Don't know about everyone else though 🤔
@reactor8502
@reactor8502 Жыл бұрын
Who remember SkyRoads?
@abdulazizaskaraliev6119
@abdulazizaskaraliev6119 6 ай бұрын
Hey, a great video you put together. Just wanted to note that at 41:28 i think instead of updating every box's sides on every animation frame. It'd be better to use a get property function. It should save some extra computation... I gues, I'm not sure.
@riza4329
@riza4329 Жыл бұрын
thanks so much
@saronarabeds6517
@saronarabeds6517 2 ай бұрын
50:51 hell .. oh noo .. vot me laughing too hard
@Cath_demian
@Cath_demian 11 ай бұрын
Hi chris! I'm a student may I modify and reproduce this code for personal use?
@AndrewTSq
@AndrewTSq Жыл бұрын
i dont understand why you did a class for the box? the second parameter in boxgeometry is the height, so you already have it? I guess I am missing something :)
@TiyaBhatt4-de8sq
@TiyaBhatt4-de8sq 4 ай бұрын
Hey everyone, did we import any modules for this game?
@Way_Of_The_Light
@Way_Of_The_Light Жыл бұрын
Long time no see bro!
@rajaryan7167
@rajaryan7167 Жыл бұрын
please make video on how you have setup sublime text for javascript
@MrSunstar
@MrSunstar Жыл бұрын
great
@tone2812
@tone2812 2 ай бұрын
If this is tutorial hell… I don’t mind it
@everettmusicdojo
@everettmusicdojo 4 ай бұрын
Oh no the box is going to hell.
@infiteri6030
@infiteri6030 Жыл бұрын
Ill try to make it using a custom 3D engine made by me
@HuynhLuong227
@HuynhLuong227 Жыл бұрын
I think you need update this game, add tree house left road, right road, add models 3d for box main 🎉🎉🎉🎉
@siporoz
@siporoz Жыл бұрын
Found cheat code, alway press on space and you can fly
@robincampbell4945
@robincampbell4945 Жыл бұрын
*Promo SM*
@prashlovessamosa
@prashlovessamosa Жыл бұрын
After 4 months 🙄.
@ChrisCourses
@ChrisCourses Жыл бұрын
next one's coming in 5 🫡
@poki6041
@poki6041 11 ай бұрын
@@ChrisCourses lol
Online Multiplayer JavaScript Game Tutorial - Full Course
5:57:10
Chris Courses
Рет қаралды 67 М.
Multi-room Platformer Game Tutorial with JavaScript and HTML Canvas
3:03:24
Learn Web Development And ACTUALLY Get A Job | Ultimate Guide
1:33:52
James Cross
Рет қаралды 1,2 МЛН
Intermediate Three.js Tutorial: Make a Globe with Custom Shaders
1:34:01
I found more incredible 3D personal portfolios!!!
19:12
Developer Filip
Рет қаралды 154 М.
The Zipf Mystery
21:05
Vsauce
Рет қаралды 26 МЛН
I Tried Making a 3D MMORPG Game in JavaScript
16:48
SimonDev
Рет қаралды 599 М.
JavaScript Fighting Game Tutorial with HTML Canvas
3:56:20
Chris Courses
Рет қаралды 6 МЛН
I Ran a Chess Programming Tournament, Here's How it Went!
1:18:42
Sebastian Lague
Рет қаралды 512 М.
I wish I knew this before using React Three Fiber
28:23
Rabbit Hole Syndrome
Рет қаралды 113 М.
I learned to code from scratch in 1 year. Here's how.
41:55
Thomas Frank
Рет қаралды 348 М.