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

Поделиться
HTML-код
  • Опубликовано: 4 фев 2025

Комментарии • 104

  • @ChrisCourses
    @ChrisCourses  Год назад +54

    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.

    • @towatch
      @towatch Год назад +14

      Thank you, Chris 🎉🙌🏻

    • @evilt521
      @evilt521 Год назад +11

      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 Год назад +3

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

    • @alykhan8359
      @alykhan8359 Год назад +2

      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 Год назад

      ​@@evilt521😊

  • @arjunbhandari2669
    @arjunbhandari2669 Год назад +5

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

  • @yoanurag
    @yoanurag Год назад +17

    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  Год назад +5

      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 Год назад +1

      Un
      🎉I🎉🎉🎉🎉🎉😂😂

  • @creativeed6788
    @creativeed6788 Год назад +5

    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!

  • @noahr1545
    @noahr1545 Год назад +5

    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.

  • @saronarabeds6517
    @saronarabeds6517 Год назад +1

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

  • @garrettmandujano2996
    @garrettmandujano2996 Год назад

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

  • @thesalmanrazak
    @thesalmanrazak 5 месяцев назад

    video in detail kept me open my eyes and watch every single step of coding. really an amazing video for me to learn in depth. this jump thing is missing. hope I didn't missed it.

  • @HuynhLuong227
    @HuynhLuong227 Год назад

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

  • @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  Год назад +1

      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 😆

  • @metaplayss
    @metaplayss 10 месяцев назад +181

    Who else woke up to this?😂
    Edit: woah thx guys for the likes!
    Edit2: dang guys these are a lot of likes ngl thanks!

    • @xk0tika
      @xk0tika 9 месяцев назад +10

      yo me too😂😂

    • @thoi99
      @thoi99 9 месяцев назад +8

      Yo what how is this a thing I’m not even into coding at all 😂

    • @evanmiller1682
      @evanmiller1682 9 месяцев назад +9

      No way this also happened to me 😂

    • @NirvanaSkulls
      @NirvanaSkulls 9 месяцев назад +6

      I don't understand how I went from serial killers to this 😂😂😂

    • @bengooo2287
      @bengooo2287 9 месяцев назад +3

      LMAO

  • @diegocandido5361
    @diegocandido5361 Год назад +2

    great tutorial. class box idea is amazing

  • @kienboy9999
    @kienboy9999 Год назад +2

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

  • @hihahahuhujs
    @hihahahuhujs Год назад +2

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

  • @worldbest3097
    @worldbest3097 Год назад

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

  • @raystone06
    @raystone06 Год назад +1

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

    • @ChrisCourses
      @ChrisCourses  Год назад +1

      Thank you sir from the ivory coast 🙌

  • @deFrontComOFer
    @deFrontComOFer Год назад +1

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

  • @manukyanq
    @manukyanq Год назад +2

    Maaan, your content is more interesting that all chatGPT related topics 😂😂😂

    • @ChrisCourses
      @ChrisCourses  Год назад +3

      I'm sick of it too, only been a few months and I can't take anymore 😂

  • @Codingblue
    @Codingblue 6 месяцев назад

    Do more I love your accurate code that is why I subscribed

  • @syuo5051
    @syuo5051 Год назад

    Thank you, Chris! It is awesome.

  • @abdulazizaskaraliev6119
    @abdulazizaskaraliev6119 Год назад +1

    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.

  • @anmolchauhan3822
    @anmolchauhan3822 Год назад

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

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

    there is a mistake, in the paramter of update of the class box you wrote group, which must be ground instead. However, the course is so amazing omg I didn't thought I would find such a masterpiece like this.

  • @ScriptSavvy-dw4rk
    @ScriptSavvy-dw4rk 7 месяцев назад

    Thank you for this great course❤

  • @wang-g7744
    @wang-g7744 Год назад

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

  • @chrystian4517
    @chrystian4517 Год назад

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

  • @theblueplanet3576
    @theblueplanet3576 Год назад

    This was a truly masterclass tutorial 👌

  • @johanesalberto6136
    @johanesalberto6136 2 месяца назад

    awesome, very cool and helpful

  • @saronarabeds6517
    @saronarabeds6517 10 месяцев назад +2

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

  • @JSLegendDev
    @JSLegendDev Год назад

    Looks awesome! Thanks for making this.

  • @--bountyhunter--
    @--bountyhunter-- Год назад

    love your vids man..❤️
    underrated

  • @poki6041
    @poki6041 Год назад +3

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

  • @321123580
    @321123580 Год назад

    Great tutorial, thank you

  • @Way_Of_The_Light
    @Way_Of_The_Light Год назад

    Long time no see bro!

  • @TiyaBhatt4-de8sq
    @TiyaBhatt4-de8sq 11 месяцев назад +1

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

  • @robertn2997
    @robertn2997 Год назад +1

    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 RUclips using Three js for there tutorials instead of Babylon.js?

    • @ChrisCourses
      @ChrisCourses  Год назад +1

      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 Год назад +1

    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?

  • @Engineerly
    @Engineerly Год назад

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

  • @me_12-vw1vi
    @me_12-vw1vi Год назад

    10/10 vid as always

  • @ProgrammingNCodingWithHarsh
    @ProgrammingNCodingWithHarsh 27 дней назад

    Please make a tutorial on Making FPS game using Three.js

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

  • @reactor8502
    @reactor8502 Год назад +2

    Who remember SkyRoads?

  • @rajaryan7167
    @rajaryan7167 Год назад

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

  • @riza4329
    @riza4329 Год назад

    thanks so much

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

  • @Butdemian
    @Butdemian Год назад

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

  • @user-zf9oe2rw9f
    @user-zf9oe2rw9f Год назад

    tanks finely :)

  • @MrSunstar
    @MrSunstar Год назад +1

    great

  • @infiteri6030
    @infiteri6030 Год назад +1

    Ill try to make it using a custom 3D engine made by me

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

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

  • @HuynhLuong227
    @HuynhLuong227 Год назад

    I think you need update this game, add tree house left road, right road, add models 3d for box main 🎉🎉🎉🎉

  • @siporoz
    @siporoz Год назад +1

    Found cheat code, alway press on space and you can fly

  • @everettmusicdojo
    @everettmusicdojo Год назад

    Oh no the box is going to hell.

  • @robincampbell4945
    @robincampbell4945 Год назад +1

    *Promo SM*

  • @prashlovessamosa
    @prashlovessamosa Год назад

    After 4 months 🙄.