Bro i was wondering do you know any course or tutorial on mixing html and webgl because all the websites out there are using that but very limited resources on how to do that or if you know how to do it then can you make a series on that
Really cool, what are you using to annotate your videos. Also you're often jumping from code to code as if you've already written the code and saved them like bookmarks. How did you do that?
Hello! I was looking at the timestamp at 2:40 but couldn't spot a render priority statement (I'm assuming you're referring to what would map to renderOrder in threejs) As for the order of the position / rotation x / rotation y, it doesn't really matter (unfortunately!) because threejs has it's own internal defaults for deciding what is applied first Sometimes the order matters, e.g. we might want to first translate an object before rotating it, and in that case you usually have two options: construct a custom made world matrix and feed it to the mesh instead of using the default position / rotation properties, or you could wrap the object with a object and apply part of the transforms on that group Hope this helps! thank you for the feedback! :)
Hi bro, thanks for the video. I am studying your video but my car ( different from yours ) is showing lights on the tyres which means wrong. Do you know what I have to change in the code? Or Could it be a problem with the 3D model?
1:14 NOT THAT IT MATTERS BUT: I'm not sure if you ever use that resetPosition function again but you have a kind of dependency cycle going on with your position useState and resetPosition. You can use a useMemo here to avoid all of this by just having: const position = useMemo(() => { let v = new Vector3((Math.random() * 2 - 1) * 3, Math.random() * 2.5 + .1, (Math.random() * 2 - 1 ) * 15); if(v.x < 0) v.x -= 1.75; if(v.x > 0) v.x += 1.75; return v; }, []) Great tutorial so far though. Loving it!
yeah that's the correct way of doing it, I was just being stupid on purpose and referencing a joke I made in the previous ep :) but next time I'll leave a comment in the code with the "right" solution so people can always reference that
@@irradiance730 one small suggestion also. Most of the time, when you are working with R3F, you’ll definitely have drei installed. Maybe also showing how to do the same technique by using drei? For example when we loading the texture, there’s a useTexture hook. And again. Thanks for the content))
I definitely should pay more attention to that and use existing drei abstractions like useTexture, I remember it was not working for some reason with this project but for future ones I'll try to use it more often! Thank you this is great feedback! :)
Error: Module not found: Error: Can't resolve 'postprocessing' Changed: import { BlendFunction } from "postprocessing"; To: import { BlendFunction } from "@react-three/postprocessing/node_modules/postprocessing"; Fixed it It's weird that when i type out BlendFunction and let the IDE auto complete the import it somehow uses a path that doesn't exist?
Thank you! I think they recently changed something with postprocessing so it's possible unfortunately that new users will have some issues with it, I normally always use exact versions of the libraries I import but this time I made an exception and now I'm paying the price, but hopefully your comment will help everyone that sees the same issue
Post-processing not working. Gives me this: Module parse failed: Unexpected token (1627:138) You may need an appropriate loader to handle this file type.
Other people have mentioned other ways to create an array of a certain size and map over it but the chaddest way is Array.from({ length: 100 }, (e, i) => ())
Please forgive me but I did something very wrong and forbidden, after I misscounted several times by typing 100 of 0s I just did: Array(100).fill(0).map() I hope that is also still ok?
I can personally forgive you but the problem here is that the gigaCHAD title can only be awarded to the brave warriors that hand typed 100 zeros by hand by the way expect even more stupid stuff like this in all of my future videos since this wont get better 😂
![Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 4 ]](http://i.ytimg.com/vi/pbfJt-XMPo4/mqdefault.jpg)
![Create a 3D car show with React Three Fiber and Three.js [ Tutorial part 4 ]](/img/tr.png)
good serie, and creating 100 items array made my day :)
Really enjoying this series! Such a great intro to how easy it is to get up and going with 3D thanks to RTF. Keep it up!
thank you! yeah this library is great and I feel like I barely scratched the surface
the best tutorial i've seen so far
Thank you 🥰
im glad you reconsidered the array. Almost had to revoke your Chaddom
Not gonna make the same mistake again 💪
Please continue making more content ur awesome!
Will do :) thank you!
Hi+ Thanks a lot for the video! I have a question! What are you using to write/draw over vscode? Thanks!
It's a separate program called LiveDraw :)
@@irradiance730 Thanks a lot! ;)
Bro i was wondering do you know any course or tutorial on mixing html and webgl because all the websites out there are using that but very limited resources on how to do that or if you know how to do it then can you make a series on that
Can you share an example of mixing webgl and html? Like having a header at the center of your canvas?
Really cool, what are you using to annotate your videos. Also you're often jumping from code to code as if you've already written the code and saved them like bookmarks. How did you do that?
For the annotations I'm using LiveDraw, and the code jumps are just me writing it beforehand and then commenting what I did :)
2:40 Why do we set the render priority here (as in, what does it do) and why do we set it in that order (xRotSpeed, yRotSpeed, position)?
Hello! I was looking at the timestamp at 2:40 but couldn't spot a render priority statement (I'm assuming you're referring to what would map to renderOrder in threejs)
As for the order of the position / rotation x / rotation y, it doesn't really matter (unfortunately!) because threejs has it's own internal defaults for deciding what is applied first
Sometimes the order matters, e.g. we might want to first translate an object before rotating it, and in that case you usually have two options: construct a custom made world matrix and feed it to the mesh instead of using the default position / rotation properties, or you could wrap the object with a object and apply part of the transforms on that group
Hope this helps! thank you for the feedback! :)
Hi bro, thanks for the video.
I am studying your video but my car ( different from yours ) is showing lights on the tyres which means wrong. Do you know what I have to change in the code? Or Could it be a problem with the 3D model?
play with the material properties of the tires, check if roughness is set to zero or if metalness is set to 1
1:14 NOT THAT IT MATTERS BUT:
I'm not sure if you ever use that resetPosition function again but you have a kind of dependency cycle going on with your position useState and resetPosition. You can use a useMemo here to avoid all of this by just having:
const position = useMemo(() => {
let v = new Vector3((Math.random() * 2 - 1) * 3, Math.random() * 2.5 + .1, (Math.random() * 2 - 1 ) * 15);
if(v.x < 0) v.x -= 1.75;
if(v.x > 0) v.x += 1.75;
return v;
}, [])
Great tutorial so far though. Loving it!
this is great advice, I didn't spot the dependency there! thank you so much! :)
hey Irradiance. thanks for the video.
Btw you can generate the boxes the following way too:
[...Array(100)].map() and take index for the calculations
yeah that's the correct way of doing it, I was just being stupid on purpose and referencing a joke I made in the previous ep :) but next time I'll leave a comment in the code with the "right" solution so people can always reference that
@@irradiance730 one small suggestion also. Most of the time, when you are working with R3F, you’ll definitely have drei installed. Maybe also showing how to do the same technique by using drei?
For example when we loading the texture, there’s a useTexture hook.
And again. Thanks for the content))
I definitely should pay more attention to that and use existing drei abstractions like useTexture, I remember it was not working for some reason with this project but for future ones I'll try to use it more often! Thank you this is great feedback! :)
@@irradiance730 Thank you brother man. You are one of guys, who making creative development popular
more easy way: Array.from({length: 100}, (_, index) => )
Idk what happened with the notification, shows 4 days later
Good video btw 👍
Thank you! :) I'm also having strange issues with notifications lately
Error: Module not found: Error: Can't resolve 'postprocessing'
Changed:
import { BlendFunction } from "postprocessing";
To:
import { BlendFunction } from "@react-three/postprocessing/node_modules/postprocessing";
Fixed it
It's weird that when i type out BlendFunction and let the IDE auto complete the import it somehow uses a path that doesn't exist?
Thank you! I think they recently changed something with postprocessing so it's possible unfortunately that new users will have some issues with it, I normally always use exact versions of the libraries I import but this time I made an exception and now I'm paying the price, but hopefully your comment will help everyone that sees the same issue
nice video bro
Post-processing not working. Gives me this: Module parse failed: Unexpected token (1627:138)
You may need an appropriate loader to handle this file type.
could you please check the imports / dependencies list that is in the repo of this project and compare those with yours?
Other people have mentioned other ways to create an array of a certain size and map over it but the chaddest way is Array.from({ length: 100 }, (e, i) => ())
Great series btw!
Please forgive me but I did something very wrong and forbidden, after I misscounted several times by typing 100 of 0s I just did: Array(100).fill(0).map() I hope that is also still ok?
I can personally forgive you but the problem here is that the gigaCHAD title can only be awarded to the brave warriors that hand typed 100 zeros by hand
by the way expect even more stupid stuff like this in all of my future videos since this wont get better 😂
@@irradiance730 ha ha
If only there was a tool with simple utils like clamp and random numbers in a given range
I'm confident that is full of libraries out there that can do that, I just never looked around to get them, but I'll try to in the future