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

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

    9 ай бұрын

    when the green box falls from the platform ,the screen should be paused also.

  • @alykhan8359

    @alykhan8359

    8 ай бұрын

    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

    5 ай бұрын

    ​@@evilt521😊

  • @meta91rbx
    @meta91rbxАй бұрын

    Who else woke up to this?😂 Edit: woah thx guys for the likes!

  • @xk0tika

    @xk0tika

    Ай бұрын

    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
    @kennyfully887 ай бұрын

    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
    @arjunbhandari26698 ай бұрын

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

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

    10 ай бұрын

    Same learning how to make a canvas

  • @saronarabeds6517
    @saronarabeds6517 Жыл бұрын

    Thanks a lot chris, what a great thing to find someone gives you precious knowledge for free like this amazing youtuber !!!

  • @JSLegendDev
    @JSLegendDev Жыл бұрын

    Looks awesome! Thanks for making this.

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

    5 ай бұрын

    Un 🎉I🎉🎉🎉🎉🎉😂😂

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

  • @diegocandido5361
    @diegocandido5361 Жыл бұрын

    great tutorial. class box idea is amazing

  • @creativeed6788
    @creativeed678810 ай бұрын

    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!

  • @garrettmandujano2996
    @garrettmandujano299610 ай бұрын

    I sincerely appreciate you making this course available free here, thank you sir

  • @syuo5051
    @syuo50517 ай бұрын

    Thank you, Chris! It is awesome.

  • @HuynhLuong227
    @HuynhLuong227 Жыл бұрын

    wow, long time no see, verry happy when see you come back, especial make game with threejs

  • @deFrontComOFer
    @deFrontComOFer5 ай бұрын

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

  • @wang-g7744
    @wang-g774411 ай бұрын

    Well done, thank you for sharing. It's a very clear tutorial❤

  • @worldbest3097
    @worldbest3097 Жыл бұрын

    wow, where you have you been!! waited for so long time!

  • @chrystian4517
    @chrystian4517 Жыл бұрын

    thank you very munch for the great information in your videos!

  • @theblueplanet3576
    @theblueplanet35769 ай бұрын

    This was a truly masterclass tutorial 👌

  • @321123580
    @321123580 Жыл бұрын

    Great tutorial, thank you

  • @gabluz
    @gabluz10 ай бұрын

    Goddamn! I was looking for this tutorial everywhere!!!!! Thank you so much!!!

  • @raystone06
    @raystone06 Жыл бұрын

    Amazing course Thank you, support from ivory coast 🇨🇮!

  • @ChrisCourses

    @ChrisCourses

    Жыл бұрын

    Thank you sir from the ivory coast 🙌

  • @anmolchauhan3822
    @anmolchauhan3822 Жыл бұрын

    It was really fun and thank you for this video broo!!

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

  • @--bountyhunter--
    @--bountyhunter-- Жыл бұрын

    love your vids man..❤️ underrated

  • @kienboy9999
    @kienboy9999 Жыл бұрын

    glad you came back. wish you well. your videos are amazing. keep do good job

  • @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 KZread 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 🤔

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

  • @poki6041
    @poki604111 ай бұрын

    what is "group" in update(group) for me that do nothing D: for me its working event without ground in update(ground)

  • @abdulazizaskaraliev6119
    @abdulazizaskaraliev61196 ай бұрын

    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.

  • @meme-vw1vi
    @meme-vw1vi Жыл бұрын

    10/10 vid as always

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

  • @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 :)

  • @Engineerly
    @Engineerly4 ай бұрын

    Hey Chris, how can i add the condition -> if our cube falls off the edge(left or right), it should still be game over!!

  • @riza4329
    @riza432911 ай бұрын

    thanks so much

  • @Cath_demian
    @Cath_demian10 ай бұрын

    Hi chris! I'm a student may I modify and reproduce this code for personal use?

  • @reactor8502
    @reactor8502 Жыл бұрын

    Who remember SkyRoads?

  • @hihahahuhujs
    @hihahahuhujs Жыл бұрын

    Love your video Please make more video about three.js game😊😊

  • @saronarabeds6517
    @saronarabeds65172 ай бұрын

    50:51 hell .. oh noo .. vot me laughing too hard

  • @Way_Of_The_Light
    @Way_Of_The_Light Жыл бұрын

    Long time no see bro!

  • @MrSunstar
    @MrSunstar Жыл бұрын

    great

  • @rajaryan7167
    @rajaryan7167 Жыл бұрын

    please make video on how you have setup sublime text for javascript

  • @TiyaBhatt4-de8sq
    @TiyaBhatt4-de8sq3 ай бұрын

    Hey everyone, did we import any modules for this game?

  • @tone2812
    @tone28122 ай бұрын

    If this is tutorial hell… I don’t mind it

  • @everettmusicdojo
    @everettmusicdojo4 ай бұрын

    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