#03 The Canvas Component - Let's Recreate Bruno Simon's Portfolio Using React Three Fiber!
Hi there 🙋♂️
In the third video of this course we're going to convert our first JavaScript file to a react component. We will add the Canvas component from react three fiber and use that as our root component so that from here on we will have access to react three fiber hooks and such. This will make it much easier to convert other components.
If you haven't seen the other videos yet, make sure to check it out! • #01 Introduction - Let...
Are you also so amazed by the 3D websites built by Bruno Simon and other creative developers? In this series of videos we will convert Bruno's Portfolio project from three.js to react three fiber. You will learn how he built this entire project and how you can built one yourself using modern technologies like TypeScript, React, Tailwind CSS, Prettier, ESLint and of course React Three Fiber. We will also handle debugging and 3D physics in React Three Fiber.
This channel is meant to help you start developing 3D websites. Make sure to subscribe if this interests you!
---
🔗 LINKS MENTIONED IN THE VIDEO
3️⃣ End result of this video: github.com/sjoerdvanBommel/th...
3️⃣ Bruno Simon's portfolio code: github.com/brunosimon/folio-2019
3️⃣ Bruno Simon's portfolio: bruno-simon.com/
3️⃣ Three.js Journey: threejs-journey.com/
3️⃣ React Three Fiber docs - Render Defaults: docs.pmnd.rs/react-three-fibe...
3️⃣ React Three Fiber docs - v8 Migration Guide: docs.pmnd.rs/react-three-fibe...
---
📫 CONTACT ME
3️⃣ GitHub: github.com/sjoerdvanBommel
3️⃣ Instagram: / threeveloper
3️⃣ Twitter: / threeveloper
3️⃣ LinkedIn: / sjoerd-van-bommel-8a23...
---
⏲ TIMESTAMPS
0:00 Introduction
1:04 The entry point of this project
4:41 Explain file & folder structure
5:48 Converting a class to a react component
10:38 Fix TypeScript compile errors
15:51 Start using React Three Fiber
20:11 Add styling using Tailwind CSS
22:20 Outro
---
Music by Coma-Media: shorturl.at/tyCEF
Пікірлер: 17
Love it man!! Keep it up :) and no need to mention I can’t wait for the next video.
Amazing my boy.. Keep it up...👌 I'm here with you forever...
kiler regex trick, noice vs code extensions, superb refactoring, detailed explanation, huge content!
@threeveloper
Жыл бұрын
Haha that's great to hear. I wish I knew better tools to automate this, but this works quite well and saves a lot of time already 😉
Keep them coming 🙏
@threeveloper
Жыл бұрын
Next week a new one 😄 Just out of curiosity, are you coding along or just learning from the video?
@cdoodev
Жыл бұрын
@@threeveloper I'm learning at the moment, but I want to add some R3F to my business website which is nextjs, so there will be some coding soon :-)
@threeveloper
Жыл бұрын
Sounds great, good luck! 😋
Heya again, followed you right up until 10:18 timeline, the problem is, i can't seem to scroll down the possibilities to get to the option of: Converting class to a function component (i'm using a mac)
@tomerhertz8502
Жыл бұрын
Does anyone knows how to get to that option manually by any chance ?
@threeveloper
Жыл бұрын
Hey Tomer, I'm not very familiar with Mac unfortunately so it's quite hard to help, but it might be easiest to copy over some parts of the code from my repo in case you are stuck 😉 If anyone else knows the answer to his issue, help would be appreciated 🙏
need help at 10:37 i am getting a message from glean that Cannot reas properties of undefined help me out
@threeveloper
11 ай бұрын
Could you compare your code with the final version of the video? I added a link to that version in the description :) If you still cannot figure it out, feel free to reach out to me
@prathamrai-uv4vl
11 ай бұрын
thanks dude it was really helpful i am really enjoying it @@threeveloper
just name your file Component.tsx then use es7/es6 extension and type tsarfce into the file and an option to create a funcional component with your fille name as the Component name will be created, then just move your code into it, use effect i simple to write once you do it a few times. (()=>{},[])
@threeveloper
Жыл бұрын
Awesome, I'm going to try this out, thanks! ✌️
i thought the whole seen was done in blender and then the car element was given movement from the blender seen