#01 Introduction - Let's Recreate Bruno Simon's Portfolio Using React Three Fiber!

Hi there 🙋‍♂️
Are you amazed by the 3D websites built by Bruno Simon and other creative developers? In this series of videos 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.
Make sure to subscribe, comment and like the video to make a chance on the 40% discount on Bruno's Three.js Journey course!
Be aware that at the end of this video, there are still things that should be fixed such as the mentioned error and certain conflicting peer dependencies. This will be handled/discussed in the next video.
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️⃣ Bruno Simon's portfolio code: github.com/brunosimon/folio-2019
3️⃣ Threeveloper base code v2: github.com/sjoerdvanBommel/th...
3️⃣ Bruno Simon's portfolio: bruno-simon.com/
3️⃣ Three.js Journey: threejs-journey.com/
3️⃣ End result of this video: github.com/sjoerdvanBommel/th...
---
📫 CONTACT ME
3️⃣ GitHub: github.com/sjoerdvanBommel
3️⃣ Instagram: / threeveloper
3️⃣ Twitter: / threeveloper
3️⃣ LinkedIn: / sjoerd-van-bommel-8a23...
---
⏲ TIMESTAMPS
0:00 Introduction
2:22 Three.js Journey course
3:14 Explaining Bruno's GitHub project
5:42 Download required files
7:47 Get the portfolio working locally
15:08 Outro
---
Music by Coma-Media: shorturl.at/tyCEF
❌ DON'T CLICK HERE
shorturl.at/mqtCR
Got you there ;)

Пікірлер: 106

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

    Some winners of the 40% discount code for the Three.js Journey course did not respond, so if you are interested, please reach out to me on insta! instagram.com/threeveloper/

  • @VoodooChino

    @VoodooChino

    Жыл бұрын

    Hi there! I know have been a lot of time, but there is any discount code still available? hehehe I don't miss anything for asking, thanks for all (sorry my english)

  • @threeveloper

    @threeveloper

    Жыл бұрын

    @@VoodooChino you can try, at least! :) Send me a message on my insta and I'll let you know

  • @424kchun424

    @424kchun424

    Жыл бұрын

    @@threeveloper Sorry, this page isn't available. The link you followed may be broken, or the page may have been removed.

  • @nguyenhuy1552

    @nguyenhuy1552

    Жыл бұрын

    Can you give me a ticket please? Thank you so much.

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

    I'd love to see react fibre with a full blown application like that. Please continue 🙏

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

    so excited for this project

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

    Great to see that you’re back! Hope to see more of you in the future :)

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Thanks once again, happy to be back as well 😉

  • @sonamsehgal3741
    @sonamsehgal3741Ай бұрын

    I was looking for this for so long

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

    Perfect 👌 Thats my boy, Its working 100%. Hope new tutorials as well.. Please continue....good luck

  • @nelsonberm3910
    @nelsonberm39102 ай бұрын

    Thanks for this tutorial !

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

    Never thought someone will come up with this tutorial video. Thanks man. following you to watch more.

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Thanks Alvi, enjoy the content!

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

    Can't wait for the next video.

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey Parag! Congratulations, you won one of the Three.js Journey discount codes! Could you reach out to me on instagram to claim yours or let me know if you're not interested? :) instagram.com/threeveloper/

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

    Awesome Video!

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

    nice would love to see more of these. i'd be interested in his course

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey Bay! Congratulations, you won one of the Three.js Journey discount codes! Could you reach out to me on instagram to claim yours or let me know if you're not interested? :) instagram.com/threeveloper/

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

    I’m hyped up. 😀

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Finishing the entire course is going to take a while, but it will be worth your patience and time 😉

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

    finally, the wait is over...

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

    This is awesome!

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey Ben! Congratulations, you won one of the Three.js Journey discount codes! Could you reach out to me on instagram to claim yours or let me know if you're not interested? :) instagram.com/threeveloper/

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

    I am really excited to do that course. Btw it is a brilliant idea to start such a series.

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Thanks ✌️

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey Zubair! Congratulations, you won one of the Three.js Journey discount codes! Could you reach out to me on instagram to claim yours or let me know if you're not interested? :) instagram.com/threeveloper/

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

    i love this

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

    Yessssss

  • @MohammedJamal-lv1dj
    @MohammedJamal-lv1dj Жыл бұрын

    Bro if you followed through on this project you'll be the greatest to ever live and I will be forever in your debt

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Thank you Mohammed 🙏😉

  • @MohammedJamal-lv1dj

    @MohammedJamal-lv1dj

    Жыл бұрын

    @@threeveloper no bro thank you people like you have made me love programming even more I'm waiting on the upload xD

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

    🔥

  • @ketan.pkapale3490
    @ketan.pkapale3490 Жыл бұрын

    Awesome man

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Thanks! ✌️

  • @TheScienceGuy10
    @TheScienceGuy107 ай бұрын

    What happened between 08:02 and 08:04? I can't get it to work on my system. Please help.

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

    🔥🔥🔥

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey Billy! Congratulations, you won one of the Three.js Journey discount codes! Could you reach out to me on instagram to claim yours or let me know if you're not interested? :) instagram.com/threeveloper/

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

    Subed today

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

    Don't worry if you didn't understand what just happened here! Well done signore/ meneer

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey Alvaro! Congratulations, you won one of the Three.js Journey discount codes! Could you reach out to me on instagram to claim yours or let me know if you're not interested? :) instagram.com/threeveloper/

  • @uzair-khan07
    @uzair-khan076 ай бұрын

    I'm interested in purchasing the course!

  • @threeveloper

    @threeveloper

    6 ай бұрын

    The code expired, unfortunately :(

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

    would love to have that course! it's funny since I've been wondering how that portfolio is done. you're doing god's work man :D

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Thanks a lot, Franrey! Hopefully you will be 1 out of the 10 😉

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey Franrey! Congratulations, you won one of the Three.js Journey discount codes! Could you reach out to me on instagram to claim yours or let me know if you're not interested? :) instagram.com/threeveloper/

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

    Please make full begginer course for three.js and WebGL

  • @threeveloper

    @threeveloper

    Жыл бұрын

    I'll keep that in mind, I'd also like to hear from others if they would like to see three.js content without r3f!

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

    Hey! Great video. Would love a discount for the 3js journey course.

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey Magnus! Congratulations, you won one of the Three.js Journey discount codes! Could you reach out to me on instagram to claim yours or let me know if you're not interested? :) instagram.com/threeveloper/

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

    Bro can please teach us about the texture and creating some kind of art gallery or something like that, It definetely will be highly appreciated!!

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey! Have you watched my video about textures and materials already? - textures: kzread.info/dash/bejne/fGmExpuvqZzOf9o.html - materials: kzread.info/dash/bejne/laOXkqaxiteze8Y.html You can try to use those videos and the FirstPersonControls (threejs.org/docs/#examples/en/controls/FirstPersonControls) from three.js to create something like an art gallery. I will probably make a video about it in the future, but there are lots of other video ideas as well, so it might take some time 😉

  • @nihalkumar3095

    @nihalkumar3095

    Жыл бұрын

    @@threeveloper Thanks man. One more thing, Can you please suggest with what I should move forward either Three.js aur react three fiber?

  • @threeveloper

    @threeveloper

    Жыл бұрын

    @@nihalkumar3095 I'm a fan of react three fiber myself because it removes a lot of boilerplate code, I don't have to handle disposing certain objects anymore, and I just prefer to work in react's ecosystem. It might be a little more effort to learn in the first place, but in my experience, it pays off once you get the hang of it. But opinions differ and there are other people who prefer plain three.js, so keep that in mind ✌

  • @user-nh3rz9lj5i
    @user-nh3rz9lj5iАй бұрын

    Can you explain how to change the name, I created 3D of desire name, and import in the Resources file and then use it in the introSection setTitles(), but the desire 3D model doesn't exist. Please guide how to change the name

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

    Hello I'm new to developing 3D websites and I appreciate what you are doing Question: why are you converting to react three fiber? Is it because it is more modern?

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Welcome to the 3D developers club :D React three fiber will remove a lot of boilerplate code and it will add new possibilities which would take a lot of effort to create yourself using plain three.js such as specific materials and portals, just to name a few 😁 Enjoy your journey! ✌️

  • @Aman_yadav1419
    @Aman_yadav14197 ай бұрын

    Is that the code is updated as the latest version of react with nextjs and threejs

  • @threeveloper

    @threeveloper

    7 ай бұрын

    No, it's a few versions behind by now so if you run into any issues, it might be best to use my versions as an example :)

  • @jiviteshnagudolla9488
    @jiviteshnagudolla94889 ай бұрын

    Im having problems with installing the dependencies

  • @threeveloper

    @threeveloper

    9 ай бұрын

    Alright, if you want me to help, you'll need to be more specific. You can always try to use the repo linked in the description :)

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

    when are you uploading the 2nd part?

  • @threeveloper

    @threeveloper

    Жыл бұрын

    I could say that, but people could pin me to that date, so I prefer not to. Just know that I'm working on it! 🙏

  • @sagred7832

    @sagred7832

    Жыл бұрын

    @@threeveloperSure 😃

  • @7heMech
    @7heMech Жыл бұрын

    What are the benefits of react over threejs?

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Less boilerplate code, there are a lot more helpers and ready-to-use components available, in some cases performance improvements, you are in a react context which can be nice if the rest of your application is written in react. It also has full support for all three.js features. 😄 Those are the main reason I'd say, but there are probably more :) Some downside might be an increased bundle size or the fact that you need to understand react.

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

    hi, any discounts still available for Bruno Simon's course??

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hi Vikas, please reach out to me on Instagram and I'll send you the discount code 👍

  • @user-io7zg3kp1s
    @user-io7zg3kp1s2 ай бұрын

    I cannot install npm -D vite-plugin-glslify. pls help :(

  • @threeveloper

    @threeveloper

    2 ай бұрын

    Could you try "npm install -D vite-plugin-glslify" instead?

  • @ValeFero
    @ValeFero10 ай бұрын

    A bunch of erros. Tried installing glslify plugin and it wasn't working. Gave up, very frustrating. Moving on to another project.

  • @threeveloper

    @threeveloper

    10 ай бұрын

    I'm sorry to hear that. You could always check out the final version of the first video in the description. That one works and can be used as a base. For every video I created a branch with the code at the end of that video 😄

  • @albertb4460

    @albertb4460

    10 ай бұрын

    @@threeveloper heya just wanted to thank you for being active on a year old video. Picked up the project version from the description and installed it with "npm install --legacy-peer-deps" (not sure if useful but maybe it helped) and I got all the node_modules installed and with no errors! Thanks!

  • @ValeFero

    @ValeFero

    10 ай бұрын

    @@albertb4460 I tried that and tried again in the weekend and today. It sucks bc I wanted to make this work but it doesn't.

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

    greetings, having some problems when trying to run the app... right after this timeline in the clip: 13:01 it says: The following dependencies are imported but could not be resolved: gsap/TweenLite (imported by /Users/sslider/Desktop/work/Projects/JavaScript/threeJs/threeveloper/src/folio/src/javascript/World/Controls.js) Are they installed? Failed to resolve import "gsap/TweenLite" from "src/folio/src/javascript/World/index.js". Does the file exist? Failed to resolve import "gsap/TweenLite" from "src/folio/src/javascript/Camera.js". Does the file exist? Failed to resolve import "gsap/TweenLite" from "src/folio/src/javascript/ThreejsJourney.js". Does the file exist? could anyone help please?

  • @tomerhertz8502

    @tomerhertz8502

    Жыл бұрын

    i refactor the code an change each : import TweenLite from 'gsap/TweenLite' to import gsap from 'gsap' ... that seems to do the trick , although i'm not sure it's a quality fix

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey Tomer, you might be using a different version of gsap. You could check out the result of this video in the link in the description. The gsap version that you should be using can be found in the package.json. Let me know if you need more help 👍

  • @tomerhertz8502

    @tomerhertz8502

    Жыл бұрын

    @@threeveloper heya mate. firstly let me thank you for the ultra quick reply, it's very appreciated. i got it working...i'm just not used to all the un updated/ several versions of each dependencies...(i come from python/ai background ) , been coding in JS for a few weeks now. so again thank you very much...and can't wait to continue with your tutorial !!!!!!!!!

  • @threeveloper

    @threeveloper

    Жыл бұрын

    @@tomerhertz8502 dependency management is a whole thing on its own indeed 😄 Glad you figured it out and thanks for the compliments 👍

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

    So it is like usng three js in react three fiber project?

  • @threeveloper

    @threeveloper

    Жыл бұрын

    At the end of this video, it is still only using three.js. We only imported Bruno's project into our base code project which contains support for TypeScript, React, React Three fiber, etc. But we haven't used those technologies yet. After this video we will actually start using them 👍

  • @sjfieksnd

    @sjfieksnd

    Жыл бұрын

    @@threeveloper Oh alright I was expecting that . Would you be converting all the imported threejs to react componenets eventually?😊

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Yes, we are going to convert the entire project so that it's fully working inside of the react context. This will include converting a lot of code to react components indeed 🙂👍🏼

  • @sjfieksnd

    @sjfieksnd

    Жыл бұрын

    @@threeveloper Wowww that is amazing!!! It would be such a big project !! I am really looking forward to it!! Thanks for the contents!!

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

    I watch a lot of videos like these on mobile devices and the text is so small if you show everything at desktop scale.

  • @threeveloper

    @threeveloper

    Жыл бұрын

    That's great feedback. I was thinking most people would code along on PC, but that's probably not the case for everyone. I'll take your feedback into account for the future videos, thanks! 👍

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey Tuomas! Congratulations, you won one of the Three.js Journey discount codes! Could you reach out to me on instagram to claim yours or let me know if you're not interested? :) instagram.com/threeveloper/

  • @CaptainDouchie
    @CaptainDouchie9 ай бұрын

    hey im interested in the course, do u happen to still have a discount code

  • @threeveloper

    @threeveloper

    9 ай бұрын

    Hey! You can try to use the code threeveloper1. Let me know if that worked! 😄

  • @CaptainDouchie

    @CaptainDouchie

    9 ай бұрын

    @@threeveloper expired sadly hahah guess i have to wait for the next promo

  • @threeveloper

    @threeveloper

    9 ай бұрын

    @@CaptainDouchie :( I'm sorry for that

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

    I literally have tears coming down my cheeks, it's been 18 hours and I can't get it working, can't install the packages because it says a complete log of this file can be found... and at the same time my imports are saying that they can't find a declaration file for module....

  • @YST187

    @YST187

    Жыл бұрын

    and when I npm run dev, it says vite is not recognized as a command

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey, feel free to message me on my Instagram which is linked in my KZread account info. I might be able to help you out :)

  • @YST187

    @YST187

    Жыл бұрын

    @@threeveloper Finally made it!!! Switched from npm to yarn, did a lot of other stuff and worked!!!

  • @threeveloper

    @threeveloper

    Жыл бұрын

    @@YST187 That's great, congrats! 👏

  • @rinshankolayil6855
    @rinshankolayil68558 ай бұрын

    Hi, I would like to receive the offer

  • @threeveloper

    @threeveloper

    8 ай бұрын

    It does not work anymore unfortunately :(

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

    When did u add the additional html file how do i open it in a browser where did that inspector window come from .... like i dont understand whats the point if ur not going ti tell me how yr doing what ur doing ..... its nit a tutorial its just a viewing session

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey there, I understand your frustration, but I'm not explaining those basics since that would make this course way too long. If you are unfamiliar with the things you mentioned, then I recommend you to learn more about web development basics (possibly in react later on) first before watching this course ✌

  • @Victor-fg1ky
    @Victor-fg1ky Жыл бұрын

    Please I am so so so interested in Bruno Simon's course🙏🙏 I'd also love to know if he's offering a lifetime access to the course, or a yearly package. Thanks.

  • @threeveloper

    @threeveloper

    Жыл бұрын

    You will get lifetime access to it when you buy it 😉 Could you contact me via Instagram which i linked to in my profile? 👍

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

    Hey man I love your content would you like to come and make some cool videos on my open source channel? I would love to give you the recognition and it would be an amazing collaboration. Let me know how we can connect.

  • @threeveloper

    @threeveloper

    Жыл бұрын

    Hey there! Feel free to send me a message on my Instagram which I linked to in my profile. We can discuss the options! 😉

  • @HashLipsAcademy

    @HashLipsAcademy

    Жыл бұрын

    @@threeveloper perfect

  • @nickcarvajal

    @nickcarvajal

    Жыл бұрын

    Ayeeee hash lips is dope!!