Three.js Game Tutorial: Learn Three.js while building a traffic run game

[@user-tt6nc6mo7k]

This is so well explained. You need to create paid courses. The work you put into this is amazing.

[@HunorMartonBorbely]

Thank you :) Actually, I do have a paid course on React: skl.sh/2Lw526T and one on Vue.js: skl.sh/2ERhZac But things like Three.js and the other videos I have here on KZbin are so niched that they wouldn't make sense as a paid course, so I rather make it free and available for everyone who wants to see it :)

[@CSEAsapannaRakeshRakesh]

@@HunorMartonBorbely Means a ton. Thank you.

[@stanleychukwu7424]

some of you guys like to kill the show? just enjoy the course and move along.. no one is talking about a paid course now eehh?

[@sulochanakharat9033]

@@HunorMartonBorbely thankyou sir that you don't make it paid 🙏🙏

[@sulochanakharat9033]

Because everyone can't buy course like me as i am under 18

[@dandyrilla]

I've never seen this simple and awesome layout (left: code, right: geometric explanation) before! It delivers the main points to viewers need to know about in the tutorial. Thank you for your clear explanation!

[@HunorMartonBorbely]

Thank you! The funny thing is, I started this way because I found it easier. Cause if you do screen recording then the timing has to be in sync with the narration. This way by doing a slide deck it's easier to sync, though it takes more time to do the slides

[@gavinlew8273]

This tutorial is gold standard.

[@HunorMartonBorbely]

Thanks! It took me a while :)

[@ef2536]

This was very well explained and to the point 10/10 I now feel like I can use this library and not get intimidated

[@HunorMartonBorbely]

Thank you! :) Yeah, 3D libraries can be intimidating at first, and many of the examples are rather advanced. But you can get quite far with basic shapes as you see. Subscribe for more, I took some time off, but I have some other Three.js game ideas I'd like to cover still

[@ImSantar]

Pure gold here, really loved the way u teach 🙏🙏

[@HunorMartonBorbely]

Glad to hear that!

[@georgegeorge3073]

Man I actually remember playing this game on my phone a few years back, awesome!!!

[@HunorMartonBorbely]

Thanks man. Yeah, I played it too, that’s why I remembered it. And figured it’s an easy game to recreate :)

[@alanrodz2438]

This tutorial is amazing dude, thx 4 uploading it

[@HunorMartonBorbely]

I'm glad you liked it! Check out the other ones as well, there's a few good ones, and more is coming!

[@furciorifa]

If you want to learn something, you must know almost everything about OpenGL, and computer Graphics, the video is useful if you know such things

[@HunorMartonBorbely]

Why? It was hard to follow this way? I know almost nothing about OpenGL, some of computer graphics, but I don’t agree that you always need to know the underlaying technologies. You can play around with Three.js to do basic games without knowing the ones above

[@furciorifa]

@@HunorMartonBorbely But you're just explaining superficially, sometimes it's hard to learn something, but congratulations, at least it's working

[@HunorMartonBorbely]

Yeah, I get you. I think it depends on attitude. Some people want to have a deep understanding and go through the basics and some just want to get things to work and then maybe later look more into the details. I think both approach works, it just depends on your personality

[@LachlanMiller]

Amazingly detailed video, great job. Played the game for a good 30m, it's really fun!

[@HunorMartonBorbely]

Thanks a ton! I see you also have a dev channel. Good stuff!

[@antoniofuller2331]

I see he has a Dev channel too. How interesting. Didn't know devs watch other devs

[@LachlanMiller]

@@antoniofuller2331 Good way to learn about new topics, and also improve my own presentations

[@mortkebab2849]

This is excellent, and I can see how it might be elaborated into something more ambitious with more advanced AI.

[@HunorMartonBorbely]

Thank you! Go ahead, I'd love to see what you come up with :) When making a tutorial it always a balancing game between making the explained source code as short as possible and still making something meaningful, but yeah, the possibilities are endless 🚀

[@tallgeese9715]

Really appreciate this, thanks a lot!

[@HunorMartonBorbely]

You're very welcome! Have you seen this one? kzbin.info/www/bejne/nnPMeHmmd9GYbac

[@Yash-fz7kw]

I am the 1000th subscriber. Congrats

[@HunorMartonBorbely]

Thanks for subbing! Here it still looks like 999th, but it's this _ close, I'm also refreshing the page quite often now 😊🙏 🎉

[@HunorMartonBorbely]

And ... 1K! New content coming soon :)

[@Yash-fz7kw]

Make video on how do you edit your videos. Awesome content

[@HunorMartonBorbely]

@@Yash-fz7kw Cool idea, I might do it at one point. For now, I'm still a small fish to tell anyone how to make a KZbin channel though. Maybe after 10K. The next one is going to be a simple, "How to set up a new project" video and then I have at least two Three.js ideas. Then who knows. I have some idea to do one on TypeScript and one on reactive programming, but those might be too advanced.

[@HunorMartonBorbely]

@@Yash-fz7kw Spoiler: Lot's of slides in Keynote btw, then put together with iMovie

[@unknown-bx8my]

Wow, thank you for this great video❤ Because I really need to learn three.js😍

[@HunorMartonBorbely]

Thank you, I'm glad you like it. Check out this one as well if you haven't seen so far: kzbin.info/www/bejne/nnPMeHmmd9GYbac Has some similarities, but it ends up as a different game :)

[@unknown-bx8my]

@@HunorMartonBorbely thank you a lot.

[@nikolas4749]

Thanks Hunor Will you make react three fiber game ?

[@everyumclust7985]

Thank you. Very clear explainition

[@HunorMartonBorbely]

Thank you, I'm glad you liked it :)

[@ultronzix6330]

More tutorials please and thank you! And very simple and pleasing ide you are using,

[@HunorMartonBorbely]

Thank you, I started working on the next one. Actually that's not an IDE just a slideshow made for this tutorial :)

[@HuynhLuong227]

omg, amazing game :D

[@joaodev3438]

This was great! Thank you.

[@HunorMartonBorbely]

Glad it was helpful! :)

[@julianbullmagic]

more videos please, good stuff

[@HunorMartonBorbely]

I will, just had to focus on other things. But we are slowly going up to 1K subscribers, so yes, I think I'm going to continue :)

[@jabransaeed6155]

Thanks for this.

[@janodano6220]

Great tutorial!

[@HunorMartonBorbely]

Thank you! Cheers!

[@Web47]

You are great explained... Thank you so much....you are superb teacher

[@HunorMartonBorbely]

Thank you! 😃

[@stanleychukwu7424]

quick question hunor, how many years of coding experience do you have? did you study computer science or physics? and when is your next upload coming? thank you hunor, and you're so so advanced, i admire your knowledge!!!

[@HunorMartonBorbely]

Hi there. Thanks, I appreciate it! Yeah, I studied computer science at university and we had a bunch of physics as well for some reason. If you are asking about my work experience then it's around 8 years, but it's actually way more if you count when it was still just a hobby. And I'm really hoping that I finish it this month. I already got the script and the narrative, but it just takes forever to make quality content. Especially if you work in the meanwhile. But I'm on it, stay tuned! :)

[@calderarox]

Great Video!

[@HunorMartonBorbely]

Glad you enjoyed it :)

[@nicklansbury3166]

First! - Another great tutorial. Thank you Hunor

[@HunorMartonBorbely]

Thank you Nick, I appreciate it! I’m always excited to see how people react once I upload something, but it seems like it’s cool then :)

[@larrystone654]

Wonderful tutorial! Thank you! One question I have: would it have been easier / more straightforward to somehow make the cars pivot around a point at the center of each circular track than to have to calculate the angle of the car? (I'm just learning what's possible with Three.js, but since groups are possible, as is rotation, it seems like a strategy you could have used?)

[@HunorMartonBorbely]

Yes, absolutely! But when it comes to collision detection it might be actually harder at that point. It's a good observation though. When I make these tutorials I always try to make it as easy as possible and simplify the math in it. As you figured there are many ways to achieve the same thing :)

[@lailaelsarky8419]

hey i wanna try implementing it the way you suggested. is there any way you can help/suggest a tutorial on how to do that @Larry Stone

[@chetan_nada]

Great tutorial. I came from codepen.

[@HunorMartonBorbely]

Awesome, thank you! It's good to see this trending on both places :)

[@chetan_nada]

@@HunorMartonBorbely Yes. I had played this game and enjoyed it a lot.

[@HunorMartonBorbely]

@@chetan_nada Thanks. It's based on a mobile game called Loop Driver :)

[@pranavpowar2334]

It's amazing, really loved it!!!!!!

[@HunorMartonBorbely]

Thank you so much 😀I had to focus on some other things, but stay tuned, I'm going to get back to it :)

[@creatorshorizon5125]

Very nice tutorial, love it! One thing i noticed tho, is that no threejs tutorial ever states the fact, that you should use webpack to make the npm import work. I am coding raw JavaScript vanilla without any frameworks, helpers, bundles etc. for years now whatsoever. To mention shortly how to get startet with the setup first would have helped a lot. Still, the best explanation for coding with threejs out there! Thanks 🙏

[@HunorMartonBorbely]

Thank you! It’s true, it is missing some introduction about how to set up a project. The reason I skipped that is that itself is a whole video in its own and it would have made it half an hour longer. But since that I made a how to set up your front entrance project video, so check it out if you need some more tips. You don’t necessarily need webpack for instance

[@thesuperyou2829]

I also do not use build-system. you do not need webpack you can just import by giving full back from dist folder in three.js folder in nodeModules. Also rollup is best to rollup the final project

[@RCOA24]

This is fun to learn, thank you

[@HunorMartonBorbely]

Thank you, I appreciate it. Coding can be super fun. Except when you chase some nasty bugs :)

[@soniamaklouf1178]

Well explained

[@HunorMartonBorbely]

Thank you, I tried to slow this one down to make it more understandable. My earlier videos were rather fast paced

[@salaheddine__8550]

Amazing work, Bravo

[@HunorMartonBorbely]

Thank you! Cheers! I took a long break, but as the weather gets cold again, I really want to cover another Three.js game, so stay tuned!

[@charleshenri4871]

Maybe I missed it at the beggining of the video, but I was so confused for a while until I saw that the axis you used in your exemples weren't the axis as they are usually presented.

[@HunorMartonBorbely]

I think I mentioned it when setting up the camera. It felt more natural to turn it around so that map is spreading on the XY plane

[@stanleychukwu7424]

subscribed fam!!

[@HunorMartonBorbely]

Thank you! I read your other comment as well. Actually I'm quite happy that people still keep subscribing to my channel even after a long break, but seems like I have to keep up with it :)

[@coolsai]

awesome 👍🎉 💥

[@HunorMartonBorbely]

Thanks 🤗Stay tuned for more, I have two other Three.js ideas in the pipeline :)

[@coolsai]

@@HunorMartonBorbely nice 👍 much appreciated 🔥 waiting

[@ТатьянаКрылова-ю5г]

thank you! what do u think about future of 3D JS games?

[@HunorMartonBorbely]

Honestly at this point I think they are rather curiosities, and they are fun to play around with 3D (I imagine 3D libraries on other platforms work in a similar way). Haven’t really seen a serious game on the web though. Back in the days Flash player was big on web games, but now casual gaming rather moved to mobile

[@neilmeich]

cool

[@teoavignon647]

Hello, Could you please explain how you would proceed to instanciate thousands of cars?

[@HunorMartonBorbely]

That would probably require some optimizations, like reusing materials and meshes. But actually I'm not an expert in that topic :)

[@teoavignon647]

​@@HunorMartonBorbely Thanks for the reply !

[@iGhostr]

Hungarian comment passing by: Szia Hunor! SZTE-n programtervező informatikán végzős hallgató vagyok, éppen a Three.js-t tanulom, megnéztem a videóidat ezzel kapcsolatban, nagyon tetszik a stílusod, sokat tanultam tőled. Valamilyen chat elérhetőséget kérhetek tőled? (pl. Discord) Szeretnék pár kérdést feltenni a technológiával kapcsolatban ha nem okoz neked gondot.

[@HunorMartonBorbely]

Szevasz, hirtelen azt olvastam SZFE-n vagy :) Kérdezd itt nyugodtan, a KZbin szereti ha beszélgetnek a videók alatt. De amúgy sokkal többet nem feltétlen tudok elmondani mint a videókban, ez nekem is csak egy hobbi és ahogy probálgatom a dolgokat úgy tanulom én is

[@lorenzodossi]

which program do you use for the explenations ? ae ? great video btw !

[@HunorMartonBorbely]

Nothing special really. It's actually a slide deck made in Keynote then I put it together with the audio in iMovie. It's Quite a manual process. What is ae?

[@lorenzodossi]

@@HunorMartonBorbely ae stands for after effect :)

[@HunorMartonBorbely]

@@lorenzodossi Oh, right. No, I don't use any paid software. And Apple's Keynote is suprisingly powerful with animations

[@lorenzodossi]

@@HunorMartonBorbely nice to know! Btw today I followed you threejs car game and it has been amazing! Great video

[@lailaelsarky8419]

hi can i ask what the timestamp function is meant to do? im confused how to get the car to move around the track.

[@HunorMartonBorbely]

The animation function should be passed on to the renderer's setAnimationLoop function, so that it keeps on calling the function 60 times every second. I don't remember how this is introduced in this video, maybe we build the function first, and only then call it. If you are stuck, you can check out the source code here: codepen.io/HunorMarton/pen/ExNzWqm?editors=0010

[@sokhuong-uon]

greate

[@HunorMartonBorbely]

Thank you :)

[@harshjain8345]

Hey great video🙌🙌... Btw can you mention your pc specs..i'll be glad..if you do .so ..i'm just curiouss... Already subscribed

[@HunorMartonBorbely]

I’m using a 6 years old MacBook Pro. But why? Specs shouldn’t be a bottleneck for web development really. Is it lagging at you?

[@harshjain8345]

@@HunorMartonBorbely no..i'm a beginner...so i didn't knew about that....you cleared my doubts

[@HunorMartonBorbely]

@@harshjain8345 you edit text and run it in a browser. Of course if you get to the level when you run docker and run a whole system on your computer then you need more, but the basics don’t require much

[@harshjain8345]

@@HunorMartonBorbely i have 8gb ram...2gb graphics...and as far as i know.... Then..even backend is deployed on cloud ...so even that doesn't reuire a strong pc...and... Everything can be managed on cloud.. And...docker containers can be deployed on cloud..to function..... So no one would rely on physical machine for heavy stuff...

[@HunorMartonBorbely]

@@harshjain8345 Well, for docker you probably want to run it on your machine during development. But if you are beginner, you don't have to worry about that. Graphics btw you don't need at all (I only have integrated graphics on my machine)

[@kashvijhamb2806]

I am a follower of you on codepen as well as a subscriber on youtube, will you make a word grid where some words will be given and you have to search and highlight them when highlighted the word should disappear and when all of them are highlighted there should be a congrats screen and next level, I know this is a hard one that is why I am asking you to help, Plz post it on codepen I will see there

[@HunorMartonBorbely]

Do you mean something like this? :) codepen.io/LoueeD/pen/WQxLYp

[@EDWIN-zg4yu]

do you have any tutorials to do this but in 2D instead of 3D?

[@HunorMartonBorbely]

Not really this, but I have some tutorial that use a 2D canvas. The logic of the came could be transferable.

[@DIAMONDMOVIES123]

please make flappy bird game in a modern way please reply when you finifhed i am ur fan

[@HunorMartonBorbely]

That's a good idea. I might get there on day. But for the next months I have another plan :)

[@hepli]

I dont know what i did wron, but my website is fully white exept for the buttons on the bottom... i copied the code, wrote it myself, i tried to open the site local on my computer and on a webserver, but nothing worked

[@hepli]

nevermind i fixed it

[@HunorMartonBorbely]

Was it that you had to import Three.js?

[@Kusukaruto]

you should have a lot more subs than you do now

[@HunorMartonBorbely]

Thank you. Recently it gets more and more, wondering if it’s listed somewhere. How did you find it?

[@김하모니카-i4i]

Can you create a portal game using threejs?

[@HunorMartonBorbely]

I think technically you can, but WebGL might have it's limit. I'd rather use Three.js for experimenting with 3D and learning the foundations. Then it's probably not too bad switch to another 3D engine in another language. Not sure where are Three.js's limits.

[@Youtubeusermann]

No git repo?

[@HunorMartonBorbely]

You can find it on codepen, you can fork it from there if you want to play around with it: codepen.io/HunorMarton/pen/ExNzWqm

[@aryansaraswat5336]

Didn't got where you are writing your code

[@HunorMartonBorbely]

What do you mean?

[@aryansaraswat5336]

@@HunorMartonBorbely I mean the code editor or compiler. Which one to use?

[@HunorMartonBorbely]

@@aryansaraswat5336 Ah, that’s just a slide deck, not an actual editor

[@antoniofuller2331]

Hmm

[@HunorMartonBorbely]

Yup

[@ryangoree2311]

That was so good! Thank you. I loved the side by side, the helpful diagrams, and the fact that we did it all from scratch which left me with a good sense of accomplishment. Excited to see more 🤌

[@HunorMartonBorbely]

Thanks! Now after a long break, I have another one in mind :)

[@Neonvarun]

How do the I get the code running the codepen code isnt working, Confusing for beignner level coder to import on local editer. github would have being better.

[@HunorMartonBorbely]

You need to add Three.JS to your project. Probably that's the missing piece. I could talk about it in this video, but setting up a project is a whole other topic that I made a separate video about: kzbin.info/www/bejne/iqmuq2iLYtp_aKssi=wWuK6JQSCjRMPLsZ