Car physics mini game with React Three Fiber and Three.js [ Tutorial part 1 ]
Вставка
- Опубліковано 24 лип 2024
- Hello youtube! We're back with another small tutorial for react three fiber, this time we're also going to dip our toes into 3D physics with cannon.js! It's the first time I experiment with 3D physics on the browser and I wanted to share with you this fun scene that I've made in react + threejs
We'll touch plenty of new topics like the usage of cannon.js hooks, colliders, torque, follow up cameras and much more!
If you have suggestions on how to improve the format of these videos, or if you think that the way I'm explaining something was counterintuitive or misleading, please let me know! every bit of feedback improves the quality of the channel!
Project's repo:
github.com/Domenicobrz/R3F-in...
Try it live in your browser!
domenicobrz.github.io/youtube...
Link to the environment map / textures used in the video:
github.com/Domenicobrz/R3F-in...
Link to the gltf / 3d models:
github.com/Domenicobrz/R3F-in...
thanks to the_86_guy for the car model!
sketchfab.com/3d-models/low-p...
Intro: 0:00
Dependencies: 1:02
Boilerplate: 1:36
Scene: 2:24
Track: 3:45
Ground: 6:02
Car: 8:45
Conclusion: 9:19
#react #threejs #javascript - Наука та технологія
![Car physics mini game with React Three Fiber and Three.js [ Tutorial part 2 ]](http://i.ytimg.com/vi/2rFJU5XHbio/mqdefault.jpg)
![Car physics mini game with React Three Fiber and Three.js [ Tutorial part 2 ]](/img/tr.png)
Loving your video! The few channels that I have notification enabled 💯
Thank you! 😍 glad you guys are liking it
Great tutorial, expect more like this
Thanks master, top notch content as usual!
Too kind! Thank you :)
Subscribed, please continue the series 👍
Thank you! :)
Really inspiring video!
At 5:00 what I usually do is setting the geometry prop directly on the mesh component with geometry={geometry}
Thank you for the suggestion! no idea how I didn't think of that
Do you by chance know if this can affect the "re-rendering" of the mesh / geometry in any way?
@@irradiance730 as long as the geometry does not change it should be just 1 render. I do this also for material={material} and it works fine
@@davcri then your solution is preferable, would you be okay if the first comment appears on the next video? I might update the code and use the simpler version
@@irradiance730 totally fine! Influencing each other is the best outcome of making video tutorials :)
Great tutorial! I used the lastest version of the dependencies, which overall worked well, but I had an issue with the Track's texture displaying darker. Adding colorMap.colorSpace = LinearSRGBColorSpace below colorMap.anisotropy = 16 fixed it! There's a bit more info on the three.js color managment docs page.
Hello and thank you so much for your comment, I haven't had the chance to look yet at the color management update, will this issue affect every viewer? in that case I'll pin the comment and hope people will find it while they use the dependencies
thanks for your content
Very nice
the first person perspective blew me away. this is a real mini game
I just finished the first part of this series, something that would be amazing would be the blender process used to create this scene. I'm mostly thinking about the texture creation part and how to export the assets as the modelling can be found on youtube.
Would that be a quick recap of what happens behind the scenes in blender or a full blender tutorial minus the modeling? I was considering the inclusion of some blender bits, but if this meant that the series ends up being 6 or 7 episodes long that might be a bit too far since usually only 20% of users get to ep. 4 (to be fair though only 40-50% get to ep2 anyway, and I guess that's totally normal)
@@irradiance730 Maybe not the full process but a recap like you do in this series on the code side (showing code instead of writing it in front of us). To be fair, I would gladly see it being on a Patreon page to contribute to your work. You could incorporate the parts of the series that go a bit further. That's just an idea but that could compensate the loss of viewers and still be somehow a return on your time invested on the recording process.
@@irradiance730 The full process would be amazing! I think focussing more on the baking/UVMap and PBR textures stuff for glTF.... You could always do it as a follow up playlist - perhaps even expand the audience to Blender folk who are looking to get their models onto the web. The glTF baking process for WebGL is *criminally* poorly covered
@@mitchynz Hey there! thank you for the comment, I'll consider giving at least a quick overview of what I normally do to bake stuff in blender for my future videos, do consider though that I never get this 100% right in fact the result I see in blender always mismatches what I get on threejs and if I knew the total amount of time I've wasted trying to bridge this gap I'd probably quit programming althogheter and start a fishing business in norway
Hey Benhamin, did you find a way to replace the track.glb, it isnt working for me
Need help it's not working to me..😢
A great intro, but I'm wondering if you've had any trouble with the track and ground appearing dark. It's acting like there's a global light that's missing, but there is no such light in this scene. Your models and textures are light and brightly lit, while mine show the same colors (meaning that the textures loaded) but are dim and dark. The only difference (that I can find) is that I'm using vite instead of react, but that shouldn't affect the rendering. I've been comparing your repo to my files and haven't found any functional difference. Have you run into abnormally dark textures?
The latest version of threejs changes the color management system, make sure you're using the same version of threejs and react three fiber that I'm using in my video. I always reference explicit version numbers at the beginning of the video and sometimes even that is not enough to guarantee 100% compatibility
@@irradiance730 the color management system changed? I didn't even think to Google that. Thanks!
In general it should be enough if you make sure that the library versions of threejs and react three fiber from my repo (inside package.json) match yours, if not, update the json references and reinstall using my versions and you should be able to follow the tutorial normally
Well, I tried that, copy-pasting the versions for three, cannon, drei, and fiber into my package.json, and the textures still look dimmer than this tutorial. I'll consider this a weird side effect of something I don't understand yet and move on.
On the plus side, I finished all 4x tutorials and got something working. Thanks again!
Sorry for the super late response, sadly I'm not yet sure why even with the same copy pasted versions some users still have this issue, in case you did find the root cause let me know and I'll make a sticky comment for everyone else
Happy to know you liked the series though! :)
AMAZING TUTORIAL. Had an issue but resolved it... remember kids: CHECK YOUR SPELLING :)
thank you! and yeah, spelling can create a lot of hard to find bugs! :)
ReferenceError: process is not defined? I alread set it - "homepage": ".", to home page but process.env.PUBLIC_URL say ReferenceError: process is not defined!
Hello! have you initialized the app with create-react-app ?
@@irradiance730 i used vite
I imagine that could be the issue, you'd have to check online how to reference those assets from vite
where is the position vector of meshes come from?
Could be either me manually setting it, or gltf to jsx which is a simple utility function from the r3f ecosystem :)
@@irradiance730 manually setting sounds a little abstract, I mean Is it hard to tweak the expected position without a visual editor
yes, it is hard, and that's exactly how I spent part of my saturday when I made that video 😂
when I use "const colorMap = useTexture('./textures/track.png')", the texture on the track is darker than use "const colorMap = useLoader(TextureLoader, './textures/track.png');". I want to know the reason, thanks.
Hello, are you by chance using a newer version of threejs compared to the one I'm using in my video? Threejs updated the color management pipeline with a recent version and that unfortunately lands a different result
@@irradiance730 thanks a lot. anther small problem bothers me, how do you accurately know the positions of those collider boxes? In my project, I always change positions slightly and continuously to achieve the goal.
I don't! I had to try many, many times until I figured out the right values! in the video it looks easy because everything was prepared beforehand
@@irradiance730 The work is too heavy and thank you for your efforts! By the way, where did you get those design inspirations from? The scene you have shown is amazing!
I apologize for responding late, I usually take inspiration from google / pinterest and for this one I think I was looking at low-poly racetracks :)
wow
If the game has sound, it would have been better.
Awesome tutorial! only thing not working is replacing the track.glb, do you mind giving me some possible solutions?
Hello! What do you mean exactly with replacing the track glb? You mean using your own model?
@@irradiance730 yes that’s what I mean
What type of issue are you seeing when trying to change the glb?
@@irradiance730 there’s just nothing appearing, even though I’ve checked the model in multiple glb/gltf viewers.
Fork the repo and send me the link with an email
In case someone needs it : npm install @react-three/fiber@8.8.10 @react-three/drei@9.34.4 @react-three/cannon@6.4.0 --save-exact
Sorry if that was painful, I'll make sure next time to have a copy/pasteable string in the description
@@irradiance730 Oh it wasn't really painful, but I love to follow along when watching a tutorial and if it can help someone :) anyway, thanks for the amazing content as always!
npm i three@0.145 @react-three/fiber@8.8.10 @react-three/drei@9.34.4 @react-three/cannon@6.4.0 --save-exact
awesome tutorial as usual! I would refactor this: process.env.PUBLIC_URL + "/models/track.glb" with just "models/track.glb"
does that work for you? I'll try it and it if does I'll definitely update the repo, that's so much simpler.. I'm no react expert as you probably have guessed so this kind of suggestions is really appreciated
@@irradiance730 yes working, but not important