#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

  • @abdellahyoussfi7005
    @abdellahyoussfi7005 Жыл бұрын

    Love it man!! Keep it up :) and no need to mention I can’t wait for the next video.

  • @lasanthakarunarathne5454
    @lasanthakarunarathne5454 Жыл бұрын

    Amazing my boy.. Keep it up...👌 I'm here with you forever...

  • @alvarobyrne
    @alvarobyrne Жыл бұрын

    kiler regex trick, noice vs code extensions, superb refactoring, detailed explanation, huge content!

  • @threeveloper

    @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 😉

  • @cdoodev
    @cdoodev Жыл бұрын

    Keep them coming 🙏

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Next week a new one 😄 Just out of curiosity, are you coding along or just learning from the video?

  • @cdoodev

    @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

    @threeveloper

    Жыл бұрын

    Sounds great, good luck! 😋

  • @tomerhertz8502
    @tomerhertz8502 Жыл бұрын

    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

    @tomerhertz8502

    Жыл бұрын

    Does anyone knows how to get to that option manually by any chance ?

  • @threeveloper

    @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 🙏

  • @prathamrai-uv4vl
    @prathamrai-uv4vl11 ай бұрын

    need help at 10:37 i am getting a message from glean that Cannot reas properties of undefined help me out

  • @threeveloper

    @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

    @prathamrai-uv4vl

    11 ай бұрын

    thanks dude it was really helpful i am really enjoying it @@threeveloper

  • @derealratos6332
    @derealratos6332 Жыл бұрын

    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

    @threeveloper

    Жыл бұрын

    Awesome, I'm going to try this out, thanks! ✌️

  • @c0mplicated
    @c0mplicated Жыл бұрын

    i thought the whole seen was done in blender and then the car element was given movement from the blender seen