Car physics mini game with React Three Fiber and Three.js [ Tutorial part 4 ]

We reached the finish line again! This is the last part of this short introduction on cannon.js and physics engines with threejs and react, I loved the interactivity aspect of this project and the fact that with a few simple controls we were able to create a project that will let you play on it for longer than you would expect! (or at least that was the case for me!)
I'd like to thank all of you guys for the constant stream of suggestions and I hope to receive more and more feedback and hopefully improve the format of these videos for future projects
If there's something in particular you'd like to see for our next adventure, let me know!
Project's repo:
github.com/Domenicobrz/R3F-in...
Try it live in your browser!
domenicobrz.github.io/youtube...
Intro: 0:00
Using the car mesh in place of the box geometry: 0:22
Angular controls and reset button: 0:50
Third person camera view: 2:45
Camera keybindings: 7:18
Conclusion: 8:14
#react #threejs #javascript

[@nielsdominguez991]

the amount of knowledge packed in these 10min videos is insane, thanks so much! I would be glad to pay a paid course.

[@irradiance730]

Thank you so much! :) I thought about making more in-depth tutorials and a "course like" playlist for paid users but realistically it would take much more time than I can currently dedicate to making videos
For now I'm happy to share everything with the community for free! :)

[@sanfranciscotribe9345]

These are awesome! Please make a bunch more :)

[@irradiance730]

Thank you! I'll definitely do more in the future :)

[@noface9305]

God tier tutorials honestly

[@irradiance730]

thank you!

[@kevinleon4621]

i loved this tutorias, you are a good teacher :) thanks papi

[@irradiance730]

thank you for the kind words! :)

[@mirabuly6490]

thank you so much !

[@melcrafter]

Thank you! The next part is here!

[@irradiance730]

Hope you like it! and if you guys have suggestions for future videos please let me know! :) have fun

[@melcrafter]

​@@irradiance730 Of course I have some nice suggestions like a Tutorial on how to have a react page with the Background been a Three component interactions. For example, like instead using the ts particles using three elements!.

[@irradiance730]

What kind of background? Theoretically, even the project that we just finished could be used as a background on a normal webpage :)

[@melcrafter]

​@@irradiance730 But for beginner like myself is not that easy or intuitive. In the 3D car show tutorials I added 3D text above the car asset taking reference in your Floating Portals, 3D text and I struggle a little. Doing a webpage like the ones in the three.js page is way above what can I do right now. Also a lot of Tutorial from other sources use plain JavaScript another reason why I appreciate here the use of React with Three.js. To summarize a new tutorial you make here will be appreciate. Cheers!

[@lauracamellini7999]

Congrats for the way you explained vectors ;)

[@irradiance730]

Thank you! Vector math is though to explain since it's very visual in nature

[@donPrice255]

Nice videos, lots of information, very helpful to get me up to speed on react. I am very interested if you tried to handle a larger geo, with collider. Ie a track mesh with banking. So the car follows the track.

[@spielville5087]

Have completed the tutorial. It's great, although ramp didn't work in my case for some reason. Project idea: project with elements of presentation (e.g. clickable links inside the 3d world or videos/images). Something similar to Bruno Simon's CV.

[@irradiance730]

That's a great idea! It would have to fit a somewhat larger project where you build a portfolio-like website but that's a good idea nonetheless
For the ramp, you should try to clone the repo and run the app from there and see if it works

[@nielsdominguez991]

ramp works well bro

[@abedelrazzakchreim4988]

quick question, why did you use process.env.PUBLIC_URL for the assets, why not put all the assets in the src folder
(P.S. I'm asking because I made a game it is working but when I push it to production via github is shows me error 404)
(the only difference between my code and yours is that I didn't use a env variable (PUBLIC_URL) for the storage of my assets I just stored them in src/assets and referenced them)

[@abedelrazzakchreim4988]

Great video series btw!

[@irradiance730]

Hello! Did it work for you under the src folder? I use process.env because that's the only way I know of doing it 😂 but if it works under src I'll definitely start doing that!

[@abedelrazzakchreim4988]

@@irradiance730 lmao it didn't 😂, it was the issue I fixed it but now I have slow loading any tips?

[@irradiance730]

slow loading of the 3d assets?

[@abedelrazzakchreim4988]

@@irradiance730 yea i replaced my 3d assets with low poly ones, it takes 38 sec to 1 minute to load

[@trevorfranks69]

Please make a paid course for Udemy! I'll definitely buy it!

[@irradiance730]

Thank you for the support :) for the time being my content will be 100% free, it's a way of giving back something to the community that helped me so much few years ago!