#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
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
Жыл бұрын
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
Жыл бұрын
@@VoodooChino you can try, at least! :) Send me a message on my insta and I'll let you know
@424kchun424
Жыл бұрын
@@threeveloper Sorry, this page isn't available. The link you followed may be broken, or the page may have been removed.
@nguyenhuy1552
Жыл бұрын
Can you give me a ticket please? Thank you so much.
I'd love to see react fibre with a full blown application like that. Please continue 🙏
so excited for this project
Great to see that you’re back! Hope to see more of you in the future :)
@threeveloper
Жыл бұрын
Thanks once again, happy to be back as well 😉
I was looking for this for so long
Perfect 👌 Thats my boy, Its working 100%. Hope new tutorials as well.. Please continue....good luck
Thanks for this tutorial !
Never thought someone will come up with this tutorial video. Thanks man. following you to watch more.
@threeveloper
Жыл бұрын
Thanks Alvi, enjoy the content!
Can't wait for the next video.
@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/
Awesome Video!
nice would love to see more of these. i'd be interested in his course
@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/
I’m hyped up. 😀
@threeveloper
Жыл бұрын
Finishing the entire course is going to take a while, but it will be worth your patience and time 😉
finally, the wait is over...
This is awesome!
@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/
I am really excited to do that course. Btw it is a brilliant idea to start such a series.
@threeveloper
Жыл бұрын
Thanks ✌️
@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/
i love this
Yessssss
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
Жыл бұрын
Thank you Mohammed 🙏😉
@MohammedJamal-lv1dj
Жыл бұрын
@@threeveloper no bro thank you people like you have made me love programming even more I'm waiting on the upload xD
🔥
Awesome man
@threeveloper
Жыл бұрын
Thanks! ✌️
What happened between 08:02 and 08:04? I can't get it to work on my system. Please help.
🔥🔥🔥
@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/
Subed today
Don't worry if you didn't understand what just happened here! Well done signore/ meneer
@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/
I'm interested in purchasing the course!
@threeveloper
6 ай бұрын
The code expired, unfortunately :(
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
Жыл бұрын
Thanks a lot, Franrey! Hopefully you will be 1 out of the 10 😉
@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/
Please make full begginer course for three.js and WebGL
@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!
Hey! Great video. Would love a discount for the 3js journey course.
@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/
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
Жыл бұрын
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
Жыл бұрын
@@threeveloper Thanks man. One more thing, Can you please suggest with what I should move forward either Three.js aur react three fiber?
@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 ✌
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
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
Жыл бұрын
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! ✌️
Is that the code is updated as the latest version of react with nextjs and threejs
@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 :)
Im having problems with installing the dependencies
@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 :)
when are you uploading the 2nd part?
@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
Жыл бұрын
@@threeveloperSure 😃
What are the benefits of react over threejs?
@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.
hi, any discounts still available for Bruno Simon's course??
@threeveloper
Жыл бұрын
Hi Vikas, please reach out to me on Instagram and I'll send you the discount code 👍
I cannot install npm -D vite-plugin-glslify. pls help :(
@threeveloper
2 ай бұрын
Could you try "npm install -D vite-plugin-glslify" instead?
A bunch of erros. Tried installing glslify plugin and it wasn't working. Gave up, very frustrating. Moving on to another project.
@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
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
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.
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
Жыл бұрын
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
Жыл бұрын
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
Жыл бұрын
@@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
Жыл бұрын
@@tomerhertz8502 dependency management is a whole thing on its own indeed 😄 Glad you figured it out and thanks for the compliments 👍
So it is like usng three js in react three fiber project?
@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
Жыл бұрын
@@threeveloper Oh alright I was expecting that . Would you be converting all the imported threejs to react componenets eventually?😊
@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
Жыл бұрын
@@threeveloper Wowww that is amazing!!! It would be such a big project !! I am really looking forward to it!! Thanks for the contents!!
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
Жыл бұрын
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
Жыл бұрын
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/
hey im interested in the course, do u happen to still have a discount code
@threeveloper
9 ай бұрын
Hey! You can try to use the code threeveloper1. Let me know if that worked! 😄
@CaptainDouchie
9 ай бұрын
@@threeveloper expired sadly hahah guess i have to wait for the next promo
@threeveloper
9 ай бұрын
@@CaptainDouchie :( I'm sorry for that
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
Жыл бұрын
and when I npm run dev, it says vite is not recognized as a command
@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
Жыл бұрын
@@threeveloper Finally made it!!! Switched from npm to yarn, did a lot of other stuff and worked!!!
@threeveloper
Жыл бұрын
@@YST187 That's great, congrats! 👏
Hi, I would like to receive the offer
@threeveloper
8 ай бұрын
It does not work anymore unfortunately :(
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
Жыл бұрын
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 ✌
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
Жыл бұрын
You will get lifetime access to it when you buy it 😉 Could you contact me via Instagram which i linked to in my profile? 👍
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
Жыл бұрын
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
Жыл бұрын
@@threeveloper perfect
@nickcarvajal
Жыл бұрын
Ayeeee hash lips is dope!!