Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 4 ]
ฝัง
- เผยแพร่เมื่อ 28 มิ.ย. 2024
- Last stop of our small journey into this small project made with React Three Fiber and Three.js, this last part of the series sets everything up in motion and moves all the elements of our original scene into an endless loop of awesomeness
You can find the repo of the project here:
github.com/Domenicobrz/R3F-in...
I hope you guys liked this small project and I'll wait for you to tune in again on our next coding adventure!
Intro: 0:00
Floating grid: 0:11
Moving the ground: 1:20
Displacing the rings: 1:50
Spinning wheels: 3:20
Boxes: 4:02
Final words: 5:52
#react #threejs #javascript - วิทยาศาสตร์และเทคโนโลยี
![Floating portals with React Three Fiber and Three.js [ Tutorial part 2 ]](http://i.ytimg.com/vi/qsA3zRvihs8/mqdefault.jpg)
![Car physics mini game with React Three Fiber and Three.js [ Tutorial part 2 ]](http://i.ytimg.com/vi/2rFJU5XHbio/mqdefault.jpg)
![LISA - ROCKSTAR (Official Music Video) REACTION [SHE'S BACK!]](http://i.ytimg.com/vi/QBxE30vavMQ/mqdefault.jpg)
may we be blessed with more r3f tutorials. you explain things nicely.
Soon™ :) and thank you!
It was super interesting and fun to learn r3f with this project .. thanks man!
Thank you! :)
Your amazing tutorials are helping me to get started! Appreciate your effort!
thank you! I'm really happy to know that I'm giving something back to this amazing community
thank you so much for this series!!! your teaching methods are super great!! i wish you greatness!! thank you!
Thank you! I'm glad you liked it :)
Thank you for such tutorial , we need more R3F like this website!
Great tutorial, very clear and the end result looks awesome! Cheers!
Thank you! Cheers! :)
Amazing series! Amazing results. Learned a ton. Thank you very much!
My pleasure! :)
This is a great series..with some stunning visuals and appeasing music and technical explanation... enjoyed..thanks.
thank you! :)
Great tutorial!🔥
Thank you! :)
Damn, keep it up man!!
Amazing
this is a great start point for those who are willing to learn,
but Sir,
since you have done this tutorial last year,
you were using then "three": "0.139.2"
it is now "three": "^0.156.1"
and there is a big difference with lights, materials and reflections
this is what i have notices thus far..
simply the scene with the same settings you used is way darker when using the older version!
it is darker that, you cant even keep up with the tutorial!
this tutorial is never a waste but as someone who literally just starting, i will jump to some later video of yours first then try other channels "if i have to"
to understand
how and why this happened,
what i want to say, it is of your kindness to mention this in a new video and relate to it here somehow!
this may help alot of people
Thank you!!! Waiting for new videos
great video man I'm a front end developer currently working on projects so that I can show to the company and this project I will sure work and you make it is awesome and easier and I am gonna make similar like this one. this is my first comment on youtube. you are doing a great job. Thanks
honored to be part of your first comment! thank you so much! I'm sure that what you're learning here will be applicable in a lot of places!
so interesting, ty
awesome!
thank you! 🙏
I have literally understood nothing on the raw code level. But still very inspiring to simply try it out and play with the numbers and props to get the feel how all this dozens of properties work..Very very cool demo! Hoping you will keep the series up 🎉
I apologize if it wasn't clear enough, very often these libraries work on top of a thousand abstractions and explaining everything in detail is always a bit though
I appreciate the feedback, thanks! :)
Thank you for the React tutorial! Appreciate the way you explain 🙏
Keep the React tutorials coming! 🔥
Also can you do a tutorial with shaders?
I was wondering if I should also start to introduce shaders in my videos but I also wouldn't want to exclude people that don't know how they work
Are you familiar with shaders? have you used them extensively or would you consider yourself a beginner?
and thank you for the suggestion! :)
@@irradiance730 For begineers, it would be bit difficult to understand shaders. But it will be good they learn from top to bottom. I mean Three.js, Three-fiber, Webgl, Shaders.
Thanks for the great tutorial. Next step I'm gonna take is that the user can select different vehicles to load in the scene and have a detail box with more info about the vehicle. Also a loading screen the first time you load the page because it takes a little while and a blank page doesn't look so great xD.
hey I'd love to see the end result so keep us posted! there's always something to learn with r3f and I'm just getting started :)
Great project. Any chance for a game in JS/three or React/fiber?
thank you for this best explained video of r3f. I had a question, for the wheel to move the gtfl file need to have meshes so that means in the sketchfab software you need to have a Tire model and attach it to the car model?
Thank you for the compliment! :) One thing that I forgot to say in the video is that every model is created differently, the artist that made that model decided to have each wheel as a separate mesh, and that's the reason why I'm able to rotate them
If your model doesn't have the wheels as separate meshes then you wont be able to find them as children of the gltf group, however in that case you could still select the vertices individually in blender and then create a submesh
Thank you so much for this incredible tutorial. I want to know if I change the car, how do you know which element is the wheel for the useFrame. Because I have changed the car for another, and it can't find the wheels.
Thank you.
Thank you! :) Unfortunately the process isn't straightforward, because different models are structured differently, for example, in blender you could place all the wheels in the same mesh, or split it into 4 different meshes that live in a "folder" nested deep somewhere within the mesh
The way I did it was by looking at the model in blender and figuring out the structure of the model, then in threejs I was looking at the "children" property of each sub-mesh of the model
it's a bit painful but that's how I did it! something else you could do it to open the model in blender, select the meshes of the wheels, and change their names. Once you change the name, the exported .glb model will keep the names you gave it in blender and you'll be able to find the meshes by looking at their names
Can you show model export from blender, scene structure do's and don'ts, import to three with material properties (gltfjsx) , changing colour of model from colour picker and turning on and of model parts from buttons? This Video is best thus far on TH-cam for Three, and i have been through pleantly!!! cheers. R
Thank you for the compliment! :) I haven't made the blender model and unfortunately I'm not that great with blender (I'm trying to improve but it will take a bit) as for the gltfjsx part, that's definitely something that I have to explore in future videos, thank you for reminding me, I definitely will !
I used a different car model, and it seems like the tires don't rotate around the right axis. I tried playing with the axes a bit, but it seems like it's completely skewed compared to the rest of the vehicle model. Do you have any tips for debugging it? Great tutorial btw :)
this is definitely one of those cases where it'd be helpful to see how they spin in your project, send me an email
Hey man such amazing content you make. Please dont stop bro!
Thank you so much! What kind of content would you like to see next?
@@irradiance730 I would love to see you describing the code you write a bit more detailed. As a three js starter i am happy to get as much input as i can - but of course i also can read docs to follow your tutorials even better ;)
Just build what ever you want and i promise i will watch till the end haha
Keep up the good work! Love these small projects!
I just finished it and it was awesome, thank you so much I have learned a lot and appreciated the concise way of teaching. I am willing to replace the car by an animated charachter walking to infinity and being able to change his pants. Do you know if this can be done and if yes what path would suggest to go with. I have patterns(masks) that go on pants and want to be able to change it based on the press of spacebar. Would you be willing to help me work against $ or could you just point me the way to go ? (Blender ? or Stay in three js)
thank you for the compliment! You can definitely use this project as a base for what you're describing, and I think for skinned-models and animations you'd use the useAnimations hook from R3F (I have no experience at all with that but I did find a codesandbox example here:)
codesandbox.io/s/gltf-animations-pecl6?file=/src/App.js
hope that helps! cheers
@@irradiance730 do you by any chance know how to load a background image in reacht three fiber and it be in 360 degrees?
Yes! Soon I'll have a project that covers that, in the meantime look into the "Environment" component for drei (and when you choose an environment, make sure it's in .hdr format)
this is really cool, i have a question how could we add an overlay on there?
What do you mean exactly by overlay? A div covering the canvas?
what should one learn or be good before moving into react fiber/ 3d. As I have no experience in 3D
it depends on how deep you want to go, if you're trying to specialize in computer graphics algorithms, you definitely need to know the math and common rasterization techniques, if you're more of a generalist, having a good understanding of threejs is enough :)
3:24 How did you know the tires were in that group?: 1st child, 1st child, 1st child, 1st, 3rd, 5th, 7th, child
This was unfortunately a common question and it made me realize that I should be more careful with this type of assumptions in the future, what's happening there is that I have inspected the structure of the model in blender and I already knew in advance the parent/child structure of the mesh and that's how I could easily locate the wheel meshes
For future projects though I'll do something different, usually gltf models exported from blender also have "names" associated to each mesh, next time I'll just do a scene.getObjectByName("wheel-x") kind of lookup, which should be much simpler to explain and should make it easy to spot all kinds of parts of a model by just looking at the names in blender
I'm new to this and I wanted to change the car. I changed successfully but now I don't know how to make the wheels spin. How do you know what children you are saying to spin? I didn't understand at 3:20. Thanks brother!
That could be a long discussion but to sum it up:
If you open a glb/gltf model in blender, it will often be organized in a structure that looks like folders and files, but we're usually dealing with 3d objects that are parent and children
For that particular car model, the tires lived under those parents (you could also think of it like if they lived under those folders)
I knew the indexes because I opened up the model in blender and saw the structure of the model, but every model might have a different one.
Something else you could do is to inspect the glb/gltf model in the console, and try to remove some of the children of those arrays, until you find the children that contain the wheels
Hope that helps!
@@irradiance730 Thank you for the help. I will try that! And btw, do you know how to make the app lighter so I can see it in mobile without having 1 fps? :)
definitely start by removing some of the postprocessing effects on mobile!
@@irradiance730 I'm not sure how I'll do that but I'm giving my best atm. I successfully made the 4 wheels spin on the new car (I checked on blender but every index was 0 for some reason). I ended up doing trial and error and eventually made it!
Next step I will try to make it less heavier and I'll to add a window with a panel like:
- Click here to Open Doors;
- Click here to Open the trunk, etc
I'm a front-end dev and I'm not used to do this but I'm starting to like it. 💪 Keep up the good projects coming.
Hi bro, How can I find the wheels array easier?? I was looking each children but my 3D model is complicated...
Hello hello, just open the model on blender and check the file structure on blender, useGLTF will always try to replicate the same file structure, alternatively use gltf to jsx, google that one as well and it might help
@@irradiance730 Thanks I found doing this, but my wheel is rotating around the car, not rotating stopped...😅. I will check the code from the github, but maybe the library changed...
@@irradiance730 I checked the code and I have no idea why this is happening...maybe my model is different, the wheels are not spinning but rotating around the car, it this make sense? I am using the same version of yours and it still doing wrong
did you try to change the axis of rotation to another one?
@@irradiance730I tried before, Although I checked and I realise that the 3D model from your example is very specific when we talk about wheels. When I used your model, worked very well, but when I chose another one, I had trouble
Can I use this for react native?
R3f exists for react native, but I'm not sure honestly how it works, but I'm confident the library is also available in RN
Great project. Any chance for a game in JS/three or React/fiber?
thank you! :) what kind of game? I'm kind of hesitant because with the way I explain things it might take 1000 episodes 😂
@@irradiance730 I went through your hexagon world video and the explanaition was well structured. I would watch a platformer for starters (to learn camera control, keyboard inputs and animations).