Learn Three.js while building a 3D game with physics

[@HunorMartonBorbely]

How did you like this tutorial? Is there anything that should be explained better the next time?

[@Radu]

I didn't quite understand what happens when an overhang with a mass of 5 hits some box with a mass of zero. In your video it behaves as expected, but shouldn't it just push the other box down with it according to physics? I think everything else is really well explained. Thank you!

[@HunorMartonBorbely]

@@Radu Oh great, it's good to hear that everything else was clear. That's very cool. Yeah, this is a case of implicit logic that is not obvious. It's rather an exception. In real life, it's not really possible to have zero mass, so when you set the mass to zero that's rather an indicator that you want your object to be static and not follow the law of physics. But I'm not really the expert, to be honest, I saw Cannon.js for the first time on Wednesday :)

[@marmulak4852]

it was very well done! i like your teaching style - really professional :)

[@denizsulmaz6943]

Audio Visualazer with Logic

[@HunorMartonBorbely]

@@denizsulmaz6943 Check out Frank's Laboratory, he just recently published two videos in the topic: kzbin.info/www/bejne/jIm6p5mootWUpqs

[@glenns_AI]

Great video - was messing around with physics in ammo, had trouble due to lack of documentation, began looking at bullet docs etc etc... This just nailed it in 10 minutes for me, perfect.

[@HunorMartonBorbely]

Thanks. Yeah, documentation is not that great, you have to go by examples

[@julianbullmagic]

Thanks for making this, very clear and concise. The other tutorials I've seen so far seem to have been built for people who have some other experience with 3d game development, rather than beginners. This game is something I can understand and mess around with.

[@HunorMartonBorbely]

Glad you enjoyed it! It's always a challenge to put together a video that is understandable for beginners, yet it's still engaging. That's one of the trickiest part of making a video like this :)

[@moon_tm]

Wow! Definitely going to watch this tomorrow. Thank you very much!

[@HunorMartonBorbely]

Let me know what you think after it! :)

[@berkeleymorrison]

this is literally the best tutorial I've "ever" watched xD

[@HunorMartonBorbely]

Wow, that sounds awesome, thank you :)

[@doggo9757]

Thanks! This video really helped me a lot on making my very own Stack game. I really like the way you explained everything with such detail and the visualisations. However it would be even easier to understand if you typed in code while explaining it, instead of explaining pre written code. You earned a sub :)

[@HunorMartonBorbely]

Thank you. After a long time, I'm planning to come back at it. The format has rather practical reasons, that I find it harder to type while talking, so I record it this way. I'm still adjusting with timing. I might need to slow down a bit

[@konstabelpiksel182]

Awesome! I was looking for phaser + threejs combination the other day and stumbled upon enable3d (with ammojs). would definitely check out cannonjs per your example

[@HunorMartonBorbely]

To be honest, actually I’m not sure which library is better or worse. I just found Cannon.js the last week and I figured it’s easy enough for a game like this. But I didn’t try ammojs and I don’t know how does it compare. And I just checked phaser for the first time. That looks cool though :)

[@alisajadahmadi978]

Thank you for this video.

[@fiuzzii]

Nice video! can you make a video to cover something more of three js? Like postprocessing or I don't know

[@HunorMartonBorbely]

I’m planning a couple more. Still mainly about the basics, and also cover react-three-fiber as well and maybe blender or some simple modeling tool

[@christianmoore7046]

Great Video! I have always had trouble with three.js, this video surely helped!

[@HunorMartonBorbely]

I'm glad you liked it. Stay tuned, more is coming :)

[@kodlamavetasarım]

Very good video thnx

[@HooGeeN]

Very nice video! Well structured and explained. Thanks :) Looking forward to watching more of your videos ;)

[@HunorMartonBorbely]

Glad you liked it! I might take a bit of a break now, but check out my latest video, it's also on Three.js :)

[@yamansharma9344]

@@HunorMartonBorbely Please Comeback and make more on three.js, we are loving these tutorials

[@HunorMartonBorbely]

@@yamansharma9344 Thank you! 🙏 The next one is going to be Three.js again, but you know I just published a video this week and now it's summer, so things might be a bit slow :)

[@ongzz]

omggg just what i was looking for!! love this video 👍

[@HunorMartonBorbely]

Glad it was helpful! Check out this one as well: kzbin.info/www/bejne/gJnKc6qAo5aVh9k&ab_channel=HunorM%C3%A1rtonBorb%C3%A9ly

[@ongzz]

@@HunorMartonBorbely i will!! thanks man 💖

[@RCOA24]

I'll try this later, thank you and keep up the good work!

[@HunorMartonBorbely]

Let me know what you thought of it once you saw it :)

[@HunorMartonBorbely]

I just checked some of your videos where you play guitar. It's cool man!

[@RCOA24]

Hi Hunor, thanks for checking my vids I appreciated it. I'll update you later thanks again for this tutorial, sorry for bad grammar hahaha

[@RCOA24]

I'm already done with the tutorial, I'm happy that I learned new knowledge from you, Keep up the good work!!

[@spongycode]

loved it. feeling lucky I find this channel ❣️🙏

[@HunorMartonBorbely]

That's so nice to hear, thank you :)

[@DigitalCraftstodio]

Hi, I'm trying to create a game with three.js and cannon But I have a bad problem When I try to create a gameGroup object and adding all the shapes to it and then change its position, the world position of shapes doesn't change and when I apply cannon to it, the position of cannon is the same as shapes old position, I tried everything but it's doesn't change, I tried updateMatrixWorld(); I tried world.position.Matrix4(); But its not working I can share the code with you if you want

[@JeffAporta]

Amé tu canal amigo, todo muy bien explicado, muchas gracias

[@HunorMartonBorbely]

Gracias :)

[@return75]

awesome. your explanation is really awesome. thanks so mush

[@HunorMartonBorbely]

I'm glad it was helpful! I might cover another game with physics soon!

[@猫头-y7c]

对我之中初学者很有帮助，谢谢你

[@HunorMartonBorbely]

不客气

[@galaxy9689]

Really nice video, but I was wondering. In animation function why do you do "boxHeight * (stack.length - 2) + 4" instead of just "stack.length + 2"

[@HunorMartonBorbely]

Hi Tomi, (stack.length - 2) is multiplied by boxHeight. 4 isn't. So the two things are not the same :)

[@isaacbaruccruzdasilva7701]

very good thank you! if I have a multiplayer server, the Cannon logic goes on the server and the three logic on the client, correct?

[@HunorMartonBorbely]

Both is client, but I'm not sure how would you make a multiplayer game out of it :)

[@alitaa1154]

love your tutorials, i have few notes though , please make the code bigger and make a padding to your video I am having hard time reading and understanding your code because of the video layout.

[@HunorMartonBorbely]

Thanks! Yes, the font size is always a compromise, because I need to put a meaningful chunk of code on the screen, but sometimes that gets longer. I tried to make it better though with later videos.

[@MehmetKoseDev]

this is gold

[@karamyounes826]

can i use three.js as a game engine? i mean can i make a game for phone users, or it just for websites and thank you for these good videos

[@HunorMartonBorbely]

I know someone who made a JavaScript game and got featured with it in Apple's AppStore. Of course he used some framework to make it work natively on the phone, but I'm not sure how exactly did he make it. So I guess it might be possible to pull it off with Three.js, but honestly I never tried. I'm assuming thought that you can use similar patterns even if you switch to other game engine, so it's certainly good practice

[@beep1070]

crazy late comment, but could you explain how you pulled up the cube. This is my first time ever using three.js

[@HunorMartonBorbely]

Crazy late reply, but the video literarily starts with that :)

[@seemovielove3597]

I would like to know if possible to use the Three.js to move objects in OBJ model file? Thanks

[@HunorMartonBorbely]

I'm not sure if I get the question, but you can use OBJ files in Three.js, yes: threejs.org/docs/#examples/en/loaders/OBJLoader

[@taruvarmittal1484]

Do I have to include any library for this, to begin with? Is threejs library already included and we cant start right away by declaring its objects ?

[@HunorMartonBorbely]

You have to include three.js. If you use CodePen.io that’s fairly simple, just go to settings and under the JS tab search for three.js at the external libraries

[@CS_everywhere]

How can we install it in vs code?

[@firstacc5442]

Amazing You are amazing!!! Very good explanation

[@HunorMartonBorbely]

Thank you very much! My second Three.js video is in work, stay tuned! :)

[@firstacc5442]

@@HunorMartonBorbely really waiting for that ...❤️❤️

[@HunorMartonBorbely]

@@firstacc5442 It's out already: kzbin.info/www/bejne/gJnKc6qAo5aVh9k You haven't subscribed? ;)

[@MaybeCya]

Hi, Im just wondering how can I change the box colour to my own image. eg: its stacking pizza box instead

[@HunorMartonBorbely]

I never tried, but I'm sure Three.js documentation can help you with that. I would dig into the material options.

[@dynamitrex3975]

Im stuck at the event handling, when i click the screen, i get this error: TypeError: Cannot read properties of undefined (reading 'threejs')

[@HunorMartonBorbely]

The one place where this could happen is in the cutBox method because there you try to update the ThreeJs model and you use the threejs object. My guess is that you don't return the correct object in the generateBox function. Check out the original code to see where you differ: codepen.io/HunorMarton/pen/MWjBRWp

[@pietronavarro4595]

why i can't see the game on the codepan.io?, the game screen just show the scores and the block never appear

[@HunorMartonBorbely]

I noticed that sometimes three.js just doesn’t loads. Refreshing usually helps

[@codeit9502]

Bro, May you tell which screen recorder you use ?

[@HunorMartonBorbely]

Just the one built in with MacOS

[@codeit9502]

@@HunorMartonBorbely May you suggest a good screen recorder for window.

[@HunorMartonBorbely]

Doesnt Windows have a built in recorder as well? Like Xbox Game Bar can be used for any apps you want to record

[@jerryjohnthomas1760]

Hi thankyou for this awesome resource. You are rocking it. Would be great if u can provide some replicas of three js websites too man

[@HunorMartonBorbely]

Cool idea, which websites did you think of?

[@sepinaco]

Awesome video, thanks you so much (L)

[@HunorMartonBorbely]

Thank you! Second Three.js video in works btw, but might still take a while till I patch it together :)

[@unknown-bx8my]

I hate libraries and engines i need to 3d game devellopment(i am ready to learn Math and physics) how?

[@HunorMartonBorbely]

You can try to learn WebGL, cause three.js also uses it under the hood. But it’s going to be much harder than this

[@unknown-bx8my]

Ok thank you❤☺. Do you know any nice course to learn it?

[@HunorMartonBorbely]

Nope. It’s rather for people who want to build their own 3D engine from scratch. It’s not where I would start. If you code a real game for a console you would also use a library like Unreal engine or Unity, so you better start liking libraries ;)

[@unknown-bx8my]

@@HunorMartonBorbely ok thank you❤☺👍

[@samadanvarov4264]

Sheet Three.js documentation is always changed

[@HunorMartonBorbely]

Well, I’m web development nothing lasts forever :)

[@samadanvarov4264]

@@HunorMartonBorbely yo bro you ever watch any tutorial from you tube. I watch all video and try. But unfortunately ..... I donʼt try your tutorial yet. I hope itʼs work.

[@HunorMartonBorbely]

@@samadanvarov4264 Well, it also has the source code for reference :)

[@samadanvarov4264]

@@HunorMartonBorbely Thanks man :)

[@TheNitaer]

Hi, can you please help me?

[@HunorMartonBorbely]

Sure, have you stuck somewhere while coding?