Learn Three.js while building a 3D game with physics
Вставка
- Опубліковано 24 лип 2024
- In this course, we create a 3D game with physics. We will use Three.js to generate the 3D graphics and Cannon.js to simulate physics in this game. This tutorial is primarily for beginners.
If you haven’t used these libraries before don’t worry. This is an introductory course both for Three.js and Cannon.js. We will go through everything in detail. We go through, how to set up the scene, how to add lights, how to set up the camera, how to add animation and event handlers, and finally, we will add physics. The only thing you need to be familiar with is JavaScript, but we won’t do anything crazy with that either. So if you have a basic understanding of JavaScript, and you want to learn Three.js then this is a good start.
👉 You can find the whole game and its source code on Codepen: codepen.io/HunorMarton/pen/MW...
0:00 Introduction
1:11 A first example
1:56 A scene with a box
3:16 Lights
5:31 Camera options
9:09 The renderer
10:20 Setting up our game
15:10 Event handling and animation
19:30 Splitting a box
27:40 Adding physics with Cannon.js
34:44 Next steps
The game in the video is heavily inspired by the mobile game Stack: apps.apple.com/us/app/stack/i...
Website - hunormarton.github.io/
CodePen - codepen.io/HunorMarton
Twitter - / hunorborbely
#threejs #cannonjs #javascript #game #codepen - Наука та технологія
How did you like this tutorial? Is there anything that should be explained better the next time?
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!
@@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 :)
it was very well done! i like your teaching style - really professional :)
Audio Visualazer with Logic
@@denizsulmaz6943 Check out Frank's Laboratory, he just recently published two videos in the topic: ua-cam.com/video/VXWvfrmpapI/v-deo.html
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.
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 :)
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.
Thanks. Yeah, documentation is not that great, you have to go by examples
Wow! Definitely going to watch this tomorrow. Thank you very much!
Let me know what you think after it! :)
this is literally the best tutorial I've "ever" watched xD
Wow, that sounds awesome, thank you :)
Great Video! I have always had trouble with three.js, this video surely helped!
I'm glad you liked it. Stay tuned, more is coming :)
loved it. feeling lucky I find this channel ❣️🙏
That's so nice to hear, thank you :)
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 :)
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
Very nice video! Well structured and explained. Thanks :) Looking forward to watching more of your videos ;)
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 :)
@@HunorMartonBorbely Please Comeback and make more on three.js, we are loving these tutorials
@@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 :)
omggg just what i was looking for!! love this video 👍
Glad it was helpful! Check out this one as well: ua-cam.com/video/JhgBwJn1bQw/v-deo.html&ab_channel=HunorM%C3%A1rtonBorb%C3%A9ly
@@HunorMartonBorbely i will!! thanks man 💖
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
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 :)
Amé tu canal amigo, todo muy bien explicado, muchas gracias
Gracias :)
I'll try this later, thank you and keep up the good work!
Let me know what you thought of it once you saw it :)
I just checked some of your videos where you play guitar. It's cool man!
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
I'm already done with the tutorial, I'm happy that I learned new knowledge from you, Keep up the good work!!
awesome. your explanation is really awesome. thanks so mush
I'm glad it was helpful! I might cover another game with physics soon!
this is gold
Nice video! can you make a video to cover something more of three js? Like postprocessing or I don't know
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
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?
Both is client, but I'm not sure how would you make a multiplayer game out of it :)
Amazing
You are amazing!!!
Very good explanation
Thank you very much! My second Three.js video is in work, stay tuned! :)
@@HunorMartonBorbely really waiting for that ...❤️❤️
@@firstacc5442 It's out already: ua-cam.com/video/JhgBwJn1bQw/v-deo.html You haven't subscribed? ;)
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"
Hi Tomi, (stack.length - 2) is multiplied by boxHeight. 4 isn't. So the two things are not the same :)
对我之中初学者很有帮助，谢谢你
不客气
I would like to know if possible to use the Three.js to move objects in OBJ model file? Thanks
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
Hi, Im just wondering how can I change the box colour to my own image. eg: its stacking pizza box instead
I never tried, but I'm sure Three.js documentation can help you with that. I would dig into the material options.
Im stuck at the event handling, when i click the screen, i get this error: TypeError: Cannot read properties of undefined (reading 'threejs')
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
why i can't see the game on the codepan.io?, the game screen just show the scores and the block never appear
I noticed that sometimes three.js just doesn’t loads. Refreshing usually helps
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 ?
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
How can we install it in vs code?
Awesome video, thanks you so much (L)
Thank you! Second Three.js video in works btw, but might still take a while till I patch it together :)
crazy late comment, but could you explain how you pulled up the cube. This is my first time ever using three.js
Crazy late reply, but the video literarily starts with that :)
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.
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.
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
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
Bro, May you tell which screen recorder you use ?
Just the one built in with MacOS
@@HunorMartonBorbely May you suggest a good screen recorder for window.
Doesnt Windows have a built in recorder as well? Like Xbox Game Bar can be used for any apps you want to record
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
Cool idea, which websites did you think of?
I hate libraries and engines i need to 3d game devellopment(i am ready to learn Math and physics) how?
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
Ok thank you❤☺. Do you know any nice course to learn it?
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 ;)
@@HunorMartonBorbely ok thank you❤☺👍
Hi, can you please help me?
Sure, have you stuck somewhere while coding?
Sheet Three.js documentation is always changed
Well, I’m web development nothing lasts forever :)
@@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.
@@samadanvarov4264 Well, it also has the source code for reference :)
@@HunorMartonBorbely Thanks man :)