JavaScript Game Development: Build an Airplane Flying Game with React Three Fiber & Three.js
ฝัง
- เผยแพร่เมื่อ 19 มิ.ย. 2024
- What's up youtube! welcome back to the channel! In this small javaScript game development tutorial, I'll try to show you how to create a simple, but exciting Airplane Flying Game using Three.js, a powerful 3D library, and React Three Fiber, often described as threejs on steroids. Wether you're a beginner or an experienced developer, this step-by-step guide will walk you through the entire process of building your own little flying game from scratch, and it will touch on a few new topics that we haven't explored in any of my previous tutorials, so strap your seat belts and get ready for takeoff!
Timestamps:
00:00 - Introduction
00:34 - Blender setup intro
01:06 - Landscape geometry nodes
02:34 - Sculpt & weight paint
02:57 - Trees
04:16 - Landscape materials
05:11 - End of blender process
05:47 - VSCode setup
07:00 - Camera & environment maps
08:19 - Landscape component
09:50 - Conclusion and next steps
Try it on your browser (it will take a while to download)
domenicobrz.github.io/youtube...
Repo of the project:
github.com/Domenicobrz/R3F-ta...
Episode 1 branch:
github.com/Domenicobrz/R3F-ta...
Models & textures:
github.com/Domenicobrz/R3F-ta...
Dependencies list:
npm i @react-three/drei@9.74.14 -E
npm i @react-three/fiber@8.12.0 -E
npm i @react-three/postprocessing@2.14.9 -E
npm i three@0.153.0 -E
Subscribe for more exciting webdev tutorials, JavaScript & react three fiber / threejs projects, and creative coding tips!
If you find this tutorial helpful, don't forget to like the video and share it with your fellow developers. Leave your comments below if you have any questions or suggestions for future videos.
Connect with me on social media:
Twitter: / domenico_brz
Instagram: / domenicbrz
Website: domenicobrz.github.io/webgl/i...
Thank you for watching, and happy coding!
#react #threejs #javascript - วิทยาศาสตร์และเทคโนโลยี
Incredible as always
Wow, bro. Don't stop. Thank you for sharing all of this. Your channel will grow for sure!!!!
Thanks :) 4k is already an audience way bigger than I thought I would have
nice game, i'm glad when see it. wait for next full lession (full make model in blender, full make in react three fiber). Thank you for sharing
I'm a full stack dev and getting to know more about the Blender processing is super interesting and I would like to dive more into it to be able to create my own designs and bringing then to life.
Thanks for your great tutorials! I just discovered them but loving them already!
Thanks for the compliments! People liked the blender process so I'll likely keep on showing a quick overview for my future projects
Thanks for sharing this! In my simulations and dioramas, I have often used 3D objects to create terrain features like large hills or (if over the ocean) islands. Not only does your demo show how to make some very impressive examples using Blender, but it also shows that they can be displayed at decent frame rates - which is always a big concern.
it's my pleasure to share the process with the community, and you're right performance can be a big bottleneck when these models get larger and more detailed, in fact most times one has to compromise and find a balance
we waitng for more
This is cool. I played a game that looks similar to this and wondered how it could be made (it was a bit technical).
It was made by Sebastian Lague, a sort of geographic game where you're given a city's name and you fly to where you think it might be.
I'll definitely follow this series throughout. Thank you.
I've seen bits of his videos and that game is incredible :) definitely an inspiration. Usually I try to keep things short since my time is limited but it's cook to experiment with these little games and see how they look like after you play with the code for a bit
Btw thanks ❤️
This is so damm cool stuff.
That's lit!
the best the besth!!!! wow
good work😍😍😍
more great content
Great
Oh wow. I just heard about Fiber few weeks ago.
Love seeing the Blender side of the workflow
Thanks! Do you feel like the quick overview is enough? I'm not sure wether I should expand on that part or keep the channel focused on code and webdev
@@irradiance730 I think in this context the quick overview works well. Anything more complex (ie baking, animation etc.) would probably warrant a separate video.
Either way, dedicating time to cover it in some way at the start of a project is would be great.
I find it helpful to know how models are created and why certain approaches were taken. Not only because it’s interesting but it can also inform the way you work with the model on the code side.
Looking forward to the next one. Keep it up 💪
Thank you for the feedback, I'm aligned with your point of view and would prefer to keep the blender overviews concise and focusing on the coding side, as that's where the channel specializes. Thanks! :)
This channel is one and only nobody teaches theses keep it up🔥🔥🔥
How about making a racing game ?
thank you ❤ I recently posted a series where you can build the controls of a car on a small track :)
You can render the scene in a render texture and then feed it to the buffer prop. I used the meshTransmissionMaterial and ran into issue until I did that.
4 months !!! He's back now !!!😍😍😍😍
I am! and hopefully I'll be more consistent moving forward :)
@@irradiance730 i pray so!
The blender model you created was gorgeous. Can you make a separate video on how to fully create it?
Thanks for the feedback! Which parts do you feel I should expand upon?
Soooo coooool❤❤
thanks! :)
Thanks for sharing! I have finished the walk thru, and is now trying to add some extra features to this game on my own. One thing I am hoping to implement is the collision between the landscape and the plane. Could you shed some lights on how to achieve this feature?
Hello! You can definitely get close with a raycaster object and test it against the landscape, there should be plenty of tutorials on the internet on how to use a raycaster, hope this helps! :)
OH MY GOSH THATS INSANEEEEEEE
wtf thanks I love your videos!! You're an inspiration
My next video is gonna be resources for creative devs like blogs, case studies, and youtube channels. You're gonna be the first channel on that list. You're literally so underrated! I hope you blow up!@@irradiance730
wait that's too kind! thank you so much! you don't have to but it's definitely appreciated :) it's also refreshing to talk to other creators in the same space, I feel there's a huge amount of content that we're still missing in the threejs / cg for webdev ecosystem
@irradiance730 yeah absolutely! we growing slowly and getting bigger though!!
two nerds!
so cool, really great. thank you so much. Please share your full video make terrain in blender?
Do you think I should be going over a detailed explanation for the blender process?
@@irradiance730 yes sir
@@irradiance730 yes, please make it
I'm struggling to change the airplane model to a spaceship model I found on sketchfab. Any tips?
wow, that's amazing game. thanks for sharing. You draw everything in blender?
Hello! for this project I made everything except the airplane, which I took from sketchfab from an amazing artist that I'll credit in the next video :)
@@irradiance730 yes pro, can you share your make model (terrain, trees...) in blender?
I will love to learn brender too
it feels like forever since i saw your last upload
it has been forever :) hopefully I can be more consistent moving forward
That's so cool...can you please make part 2...where you go more in depth ??
Hello! going more in depth for the blender process? or the rest of the video? the rest of the video hasn't been recorded yet and will hopefully go live next Monday :)
@irradiance730 from my view ...I think that going a bit deeper with blender is great ...especially since you're explaining it with relations to r3f....certainly it can't hurt ....and again seriously cool project ...and your tutorials are on another level
@@irradiance730 i want learn depth for the blender process for this project, wait for you. Thanks again
@@irradiance730 i want more in depth for the blender part of this project.. GOD bless you sir!
please my bro, please! can you make a detailed video on the blender workflow, geometry nodes is like chinese to so many of us.. Btw, you should teach blender if you've got a spare time, what?? you're damm good with/in blender! my goodness, how can u be so good with blender and R3F, do you practice everyday? and how many years have you been doing blender?
You're too kind :) thanks for the compliments. I don't practice blender too often, but once you know the important computer graphics algorithms, they translate 1 to 1 on blender so it's like if a good portion of the program becomes familiar immediately
Seems like more than one person is interested in the full blender process, I'll keep that in mind, thanks!!
Do not take the blender part out of your coding videos. I’m diving into both blender and r3f and you explaining both sides helped
noted, thank you for the feedback!
do more project please like website animation
Will do! Web animations are also planned for future updates :)
@@irradiance730 focus on ecommerce website rather than game
my brain overheat