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

[@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]

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.

[@alvichowdhury2874]

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

[@threeveloper]

Thanks Alvi, enjoy the content!

[@paragsarkar8258]

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/

[@chocair9266]

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 😉

[@rollingc2013]

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

[@lasanthakarunarathne5454]

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

[@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]

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

[@onijohn7272]

I’m hyped up. 😀

[@threeveloper]

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

[@sonamsehgal3741]

I was looking for this for so long

[@ilyasselarbaouti7287]

so excited for this project

[@baybui8214]

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/

[@zubairzafar480]

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/

[@cdoodev]

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/

[@TheScienceGuy10]

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

[@adityabiswas117]

Awesome Video!

[@vinarasimadha]

i had impressed on your portfolio design❤

[@sagred7832]

finally, the wait is over...

[@alvarobyrne]

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/

[@nelsonberm3910]

Thanks for this tutorial !

[@raymondmichael4987]

Subed today

[@landondepaul3491]

Yessssss

[@carlosrofts5230]

i love this

[@ketan.pkapale3490]

Awesome man

[@threeveloper]

Thanks! ✌️

[@hknowledge4759]

🔥

[@hknowledge4759]

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!

[@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]

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/

[@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]

Hey! Have you watched my video about textures and materials already? - textures: kzbin.info/www/bejne/gGazlWysrp6bhdk - materials: kzbin.info/www/bejne/maDGYXeuj9mAgcU 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 ✌

[@uzair-khan07]

I'm interested in purchasing the course!

[@threeveloper]

The code expired, unfortunately :(

[@Aman_yadav1419]

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

[@threeveloper]

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 :)

[@tigrlily666]

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/

[@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]

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! ✌️

[@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]

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 👍

[@DavidTonsing-b2h]

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

[@sagred7832]

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 😃

[@sudoPrivileges]

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

[@threeveloper]

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]

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

[@sudoPrivileges]

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

[@CaptainDouchie]

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

[@threeveloper]

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

[@CaptainDouchie]

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

[@threeveloper]

@@CaptainDouchie :( I'm sorry for that

[@INITart]

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 👍

[@7heMech]

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.

[@jiviteshnagudolla9488]

Im having problems with installing the dependencies

[@threeveloper]

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 :)

[@sjfieksnd]

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!!

[@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]

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/

[@EricaMaeMagalona]

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

[@threeveloper]

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

[@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]

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 ✌

[@Amzodt]

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....

[@Amzodt]

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 KZbin account info. I might be able to help you out :)

[@Amzodt]

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

[@threeveloper]

@@Amzodt That's great, congrats! 👏

[@rinshankolayil6855]

Hi, I would like to receive the offer

[@threeveloper]

It does not work anymore unfortunately :(

[@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]

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]

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!!