Build & Deploy an Amazing 3D Portfolio with React.js & Three.js | Beginner Three.js Tutorial

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии • 497

  • @javascriptmastery
    @javascriptmastery  3 месяца назад +59

    Yes, I switched to WebStorm, check it out, and I'm sure you'll love it too! jb.gg/JSMastery

  • @shahnoormujawar6825
    @shahnoormujawar6825 3 месяца назад +446

    Yesterday, I was selected as a junior backend developer without having a degree. I just passed high school, and I want to thank you because I've learned many things in web development from you. I have deep respect for you because you are changing people's lives. I know that even though you share all this amazing knowledge on RUclips for free, you may not be getting much in return, but one thing is for sure - God will reward you.

    • @javascriptmastery
      @javascriptmastery  3 месяца назад +41

      That is awesome!

    • @ChaimaaTEDJARI
      @ChaimaaTEDJARI 3 месяца назад +7

      Congratulations 🎉

    • @Karanpatel-kv6rb
      @Karanpatel-kv6rb 3 месяца назад +4

      Congratulations 👏🎉

    • @mjtech4243
      @mjtech4243 3 месяца назад +5

      Congratulations bro,by the way can I know on which platforms you seek jobs? Cuz I'm jobless for one and half year😢

    • @PatrickMohammed-p3l
      @PatrickMohammed-p3l 3 месяца назад +2

      It was through JSM I was able to build my potfolio and land a job last year as well. JSM, all i can say is Thank you, God bless you sir

  • @Mousgamee
    @Mousgamee 3 месяца назад +125

    I want to thank you for real, I got a job using your last 3d portfolio.... God bless you for all your tutoriall. You literally change my life man 🥰🥺

    • @javascriptmastery
      @javascriptmastery  3 месяца назад +11

      Happy to help!

    • @Shivam-ii2wr
      @Shivam-ii2wr 3 месяца назад +1

      Hi bro, can you please guide me how did you get job because it's been a couple of months since I have been jobless.

    • @S.R.T-e1i
      @S.R.T-e1i 3 месяца назад +2

      conrgats !
      are you frontend developer?

  • @Jaleel_
    @Jaleel_ 3 месяца назад +21

    Actually never thanked you, the last portfolio I did learning from you, got me my current job! Thank you so much for all the knowledge you give us, my life has been leveling up ever since, was able to move out my parents place and now I'm living a quiet life by the beach, and its all thanks to you and this channel

  • @EvoqueAI
    @EvoqueAI 3 месяца назад +15

    After watching JSM I have been able to start a project from scratch and make a full stack AI app in laravel and vue3, even though i'd never learnt them before, the skills that Adrian teaches made it easier for me to take on new languages and it may seem hard at first, in fact I don't think it ever gets "easy" but you will get better and better over time as you work on areas you struggle with. JSM is the best tutor on youtube. Just be sure to not get stuck in tutorial hell and go try building things yourself from scratch! Good luck guys!

  • @jasonzamora3618
    @jasonzamora3618 3 месяца назад +4

    Thank you for your work....SO cool!

  • @TechthroughAges
    @TechthroughAges 3 месяца назад +15

    He's not a wizard, but somehow always codes magic.Love you bro.

  • @PRS_Code
    @PRS_Code 3 месяца назад +17

    This channel is like HBO of projects, always top quality 🙌

  • @shadowslayer2248
    @shadowslayer2248 3 месяца назад +11

    Thanks for another amazing 3d tutorial. Adrian actually understands what his audience wants and creates unique and comparatively complex projects that noone on YT even tries to teach for free! 3d is much in demand since the AI boom right now dear sire, and we need your tutorials now more than ever. Keep three js coming!!

  • @gouravkumarbehera1894
    @gouravkumarbehera1894 3 месяца назад +9

    I just got a job as a Software Developer because of you. Thnx for amazing videos, helped me a lot to gain much skills

  • @Historytip
    @Historytip 3 месяца назад +6

    you are blessed as a teacher, you are real. Be blessed

  • @247aakashpavar6
    @247aakashpavar6 3 месяца назад +143

    Bro is not pregnant but delivers always. 🍻

    • @QwecySlim
      @QwecySlim 3 месяца назад +4

      Baaars

    • @DoingCoding
      @DoingCoding 3 месяца назад +4

      It's old one think new one.

    • @kushalmondal618
      @kushalmondal618 3 месяца назад +1

      I would recommend you not place such comment with such taste in a learning channel

    • @RR-xb1nh
      @RR-xb1nh 3 месяца назад

      cringe

    • @247aakashpavar6
      @247aakashpavar6 3 месяца назад +3

      @@DoingCoding Bro is not hawk but always focused. 😎

  • @artyCrafty4564
    @artyCrafty4564 3 месяца назад +1

    @2:06:35 to @2:17:39 used outside of 3d space to decide the positions of 3d model for various devices and then note down the measurements to make website responsive

  • @kenshalom6098
    @kenshalom6098 3 месяца назад +3

    you are a good teacher that simplifies complicated concepts to beginners broken them down to easy understanding. Thank you so much for being a generous person

  • @rifathossain328
    @rifathossain328 3 месяца назад +1

    Somehow this educational video felt so entertaining like i can watch these types of content all day. Nice work man

  • @Yesterday_i_ate_rat
    @Yesterday_i_ate_rat 3 месяца назад +5

    You are my first teacher in my coding journey, so, happy teachers day ❤ sir

  • @ManoKuerten
    @ManoKuerten 3 месяца назад +1

    I love how on @2:43:54 you take your time to explain in depth everything we went through. Thanks for that!

  • @Dr_PhilK
    @Dr_PhilK 3 месяца назад +4

    OMG, this guy never ceased to amaze me, He is my only reason I might become a React developer, he is unique and exceptional in this Javascript world ❤, if I don't win in this battlefield of programming, I won't blame you,not your fault 😂

  • @godofeternals
    @godofeternals 3 месяца назад +8

    babe wake up JSM's latest tutorial just dropped!!!

  • @IsaacOladimeji
    @IsaacOladimeji 3 месяца назад +2

    Bro!
    Your intro was so enticing as it was also funny because of how you were explaining using games and marvel characters
    You're the best man!
    Loveeeee! It!!!🚀🚀🚀🚀🚀🚀

  • @PatrickMohammed-p3l
    @PatrickMohammed-p3l 3 месяца назад +6

    With Just your Introductory segment alone, I'm super excited and laughing out loud with the memes😂😂

  • @wasiqonly
    @wasiqonly 3 месяца назад +1

    As always, thank you for an amazing work! This was really something out of the box! Just finished my 3D portfolio and already loving it!

  • @sanaan0168
    @sanaan0168 3 месяца назад +5

    Thank you. This is going to be a huge task for me as this is my first wesbite but i was watchinh your other videos. I will likely merge elements of this site and theo other

  • @Lifeisnotshort
    @Lifeisnotshort Месяц назад

    I have no experience in JavaScript but still following along your tutorial and successfully building my own 3d portfolio now I am planning to learn Java script and I feel like it will be a breeze given how much I have learned from this one tutorial.

  • @MvKidow
    @MvKidow 2 месяца назад

    This is the best...There is the reason why i came across your channel this week , doing my final year In Software development and This will be a game changer. So positive that i will land a job next year.

  • @TJOEL5
    @TJOEL5 3 месяца назад +2

    Adrian sending blessings in abundance to you man! Thank you for all you teachings and efforts you put into this craft, you are phenomenal. God Bless You

  • @alejandromontesdeoca4575
    @alejandromontesdeoca4575 2 месяца назад

    This is my second project following your channel. Really helped me grasp these concepts and tools better than many of the other channels. Just wanted to add that the hipo like animal at the beginning of the video is a tapir or danta, they are common in my country so I recognized that cute elephant-like nose instantly

  • @antonioskokiantonis7051
    @antonioskokiantonis7051 2 месяца назад

    Providing us with the Codeium information, was yet another great gift!

  • @ahmedahmedx9600
    @ahmedahmedx9600 3 месяца назад +1

    this is the best channel i have ever found in youtube and im not regretting subscribing, thank you adrian you are a legend please keep making amazing projects ❤❤❤❤❤❤❤❤❤❤❤❤

  • @akashkrishna1043
    @akashkrishna1043 3 месяца назад +2

    Thank you sir for yet another incredible video, i have learn so much from you. Best teacher on RUclips.

  • @BahaaAldein10
    @BahaaAldein10 3 месяца назад +1

    You are the best RUclipsr, teaching incredible methods like this. 💗💗💗

  • @abdulateef-da-designer
    @abdulateef-da-designer 3 месяца назад +2

    Another masterpiece from our brethren 💯
    Thanks so much Adrian

  • @matthewwilliams2483
    @matthewwilliams2483 2 месяца назад

    You are the best!!!!
    Just finished after two days on and off and playing around with it and how awesome that was!
    Can certainly say ive learnt a heap just from this video!!
    Thankyou very much!

    • @that_teen.titan-reddy
      @that_teen.titan-reddy 16 дней назад

      hey is it free , can we make it without paying money ? to host and everything

  • @kodekata
    @kodekata 2 месяца назад +1

    Incredible work, thank you!
    One thing I would improve is to avoid saying "lightning" ( ⛈️ ) when you mean "lighting" ( 💡 ).

  • @alvinpeter1166
    @alvinpeter1166 3 месяца назад +2

    The effort you put in your presentation alone is epic.. how do you even gather all these resources and put them all together?
    You are a the best 🙌🏽

    • @javascriptmastery
      @javascriptmastery  3 месяца назад +1

      Wow, thank you! I try my best and have a great team!

  • @ПотужнийНезламізм
    @ПотужнийНезламізм 3 месяца назад +1

    Thanks for tutorial, even if at some points was lost because of talwind.css or 3d models misunderstanding. Need to learn more about tailwind.css, proper layout of page with it, and try render couple 3d models in canvas 🙂. Need to see more your tutorials to understand more, thanks Adrian!

  • @solomonimhomoh1056
    @solomonimhomoh1056 3 месяца назад +4

    Wow, can’t wait to learn from you. Thank you.

  • @dontmovemf
    @dontmovemf 3 месяца назад

    im new to english language but i can undestand this tutorial, a real teacher

  • @MindJammerson
    @MindJammerson 3 месяца назад

    Absolute legend I just finished making everything what a journey

  • @sauravsingh471
    @sauravsingh471 Месяц назад +2

    I have 0 knowledge of three js, I am however a web developer who uses react, lets see, where this tutorial takes me, I really wish to learn and be able to make my own 3d stuffs before 2025. wish me luck guys !!

  • @luciusmori5878
    @luciusmori5878 3 месяца назад +1

    Adrian, this video is a masterpiece... and a piece of art! Thx so much for that! 🙏

  • @vighneshshukla3331
    @vighneshshukla3331 3 месяца назад +5

    Awesome tutorial! The combination of React, Three.js, and Next.js for 3D animations is mind-blowing🤯. This is exactly what I was looking for to enhance my portfolio. The step-by-step explanations make it easy for beginners to follow along, and the end result is incredible. Can't wait to start building my own 3D projects using these techniques. Thanks for making this process so accessible!

  • @ANONYMOUS-qx4yx
    @ANONYMOUS-qx4yx 3 месяца назад +21

    now there is a new 3d porfolio for every recruiter to look at

  • @mehmetkoyuncuoglu1647
    @mehmetkoyuncuoglu1647 3 месяца назад

    I used it your projects and portfolio and working as a full stack developer since 5 years. 😊

  • @saidulislamrana3322
    @saidulislamrana3322 2 месяца назад

    Absolutely Greate❤️❤️❤️
    I Have Following Your Channel from last couple oy Year❤❤

  • @TimeAiTales
    @TimeAiTales 3 месяца назад +21

    How on earth can someone be an expert on every single popular library.

    • @javascriptmastery
      @javascriptmastery  3 месяца назад +9

      Practice makes perfect!

    • @codingandEnglishlearning
      @codingandEnglishlearning 3 месяца назад +4

      I think the channel is owned by a group of developers and the voice is not human voice it is ai generated voice. But whatever the case the channel is providing premium quality contents for free.

    • @giannizamora7247
      @giannizamora7247 3 месяца назад +3

      @@codingandEnglishlearningtrue I think projects come from multiple people but this may be his voice. But also this is one of those rare channels I wouldn’t care about being AI because in reality it teaches us how to use many libraries and frameworks in real world projects

    • @pandaijo4145
      @pandaijo4145 3 месяца назад

      i dont think most devs are experts on every popular library. next and three.js are all built on top of javascript, so if you know js its easy to learn them. besides, you don't need to be an expert in a language to build things, especially in a context like this where its just a webpage that you interact with.
      furthermore I've heard other devs say that once you learn a coding language and get proficient with general coding rules, it can be relatively easy to learn a different language as there's usually only syntax and a few other differences.

  • @MohamedAshraf-p6i
    @MohamedAshraf-p6i 3 месяца назад +1

    This is absolute brilliance ❤ can you please in next video make sales and purchases system and let products can have multiple units like if 1 carton has 12 packs and 1 pack has 12 pieces

  • @LucidFort
    @LucidFort 3 месяца назад +1

    Another cool video to bless my weekend. Love you man❤

  • @wahidSLIMANI-p7k
    @wahidSLIMANI-p7k 3 месяца назад

    such a great three js toturial , i really enjoiyed it , Thanks for your huge efforts

  • @abwebmaster3
    @abwebmaster3 3 месяца назад +1

    This is amazing. Thank you for the awesome content. More strength to your muscle

  • @enes5509
    @enes5509 3 месяца назад +1

    Well, as always,
    Adrian never disappoints.

  • @bislan-aranyan
    @bislan-aranyan 3 месяца назад +1

    Спасибо за видео! Проделана просто огромнейшая работа. На русскоязычном ютубе такого нет - выручаете.

  • @IagoCech
    @IagoCech 3 месяца назад

    Your Excellency have come with another great video. We feast...

  • @OngieDefistlady
    @OngieDefistlady 3 месяца назад +1

    I am in love with this channel

  • @sureshsingh9880
    @sureshsingh9880 3 месяца назад +3

    Javascript wizard is back ❤❤❤❤

  • @mileslegend
    @mileslegend 3 месяца назад +1

    alooooooo .....content is top notch ........cant wait to build this

  • @affiliatepaid747
    @affiliatepaid747 3 месяца назад +2

    You are the GOAT 🐐🐐🐐

  • @jazziebaby7129
    @jazziebaby7129 7 дней назад +3

    Good tutorial but there's a super huge issue with this.
    The first example won't run for anyone because you get hit with a CORS error, you can't run scripts natively like that without a cors exception, so 99% of users will just try to load an .html file, see a blank screen, never open up the developer tools and see that you can't cross load like that. Most newbies have no idea what this means or what a cors error is, it'll just prevent people from adopting three.js as they will try it, scratch their heads and move on.
    Case in point, there are a couple of messages in the Discord of users trying to run and just quitting because all they see is a blank screen.
    I love this tutorial but there should at least be a pinned message, and I think that starting a tutorial ny teaching newbies to run a dev server is much better practice

  • @alichekarda19
    @alichekarda19 3 месяца назад +1

    The best developer in the world ❤

  • @marcioandre6469
    @marcioandre6469 3 месяца назад +1

    😯🙆🏾‍♂️ Bro delivering an incredible project like he didn’t delivered a Mobile taxi booking app few weeks ago

  • @404-not-found-service
    @404-not-found-service 3 месяца назад +1

    Thanks, I just wanted more projects to practice all this.

  • @OPGAMER.
    @OPGAMER. 3 месяца назад +2

    Another banger. Let's go 🚀

  • @pemawangchuk2024
    @pemawangchuk2024 3 месяца назад +8

    I really appreciated the design. If I can design this type, tomorrow, I am gonna leave the present job...

  • @ichiroutakashima4503
    @ichiroutakashima4503 3 месяца назад +2

    If I were to be honest, I would love to pay for a course in threeJS made by JSM themselves. I mean, while there's one famous course for threeJS, it's quite hard because the majority is simply pure theories. I want a project based course.

  • @nnlife-zv9yj
    @nnlife-zv9yj 3 месяца назад

    Ome of my favourite channel 💜💜💜

  • @SonuCartoon_9917
    @SonuCartoon_9917 3 месяца назад +1

    Congrats you completed 150 video on RUclips 🎉

  • @Code..188
    @Code..188 3 месяца назад +2

    This is wonderful thanks ❤

  • @Mohhit05
    @Mohhit05 3 месяца назад

    Thank you Sir for making these types of amazing content

  • @BeyondNoise9
    @BeyondNoise9 2 месяца назад

    Please make more videos on end to end enterprise level applications with deployment like restaurant apps, Amazon etc .. even if it is 30-50 hour long I’ll watch it .. want to add good projects to resume ❤

  • @the_guy_who_travels
    @the_guy_who_travels 3 месяца назад +1

    You are just a gem❤

  • @nicolettifps
    @nicolettifps 3 месяца назад +1

    UHUUUUU MORE THREEJS MASTERPIECE!!!!

  • @Zaza_software
    @Zaza_software 3 месяца назад +1

    You have helped many soul thank you so much

  • @onyedikachiozoani
    @onyedikachiozoani 3 месяца назад +1

    So eager to watch this.

  • @benielsmile3355
    @benielsmile3355 3 месяца назад +1

    The master in action

  • @suryakantasinha
    @suryakantasinha 3 месяца назад +1

    OMG! Amazing adrian sir 😍

  • @jaferhussein2645
    @jaferhussein2645 3 месяца назад

    As always whenever I see this guys video I say I should subscribe but the thing is I already did.

  • @MoatazMohamed-h4d
    @MoatazMohamed-h4d 3 месяца назад +1

    Bro you are amazing!

  • @dhanush77732
    @dhanush77732 7 дней назад

    Next make a scroll animation portfolio like when user scrolls the object should change the position and get animated of that object i hope you understand

  • @AsadKhan-gp9sk
    @AsadKhan-gp9sk 3 месяца назад +2

    Yay three js video

  • @feeeedox
    @feeeedox 3 месяца назад +1

    Love to learn more about threejs!

  • @SaurabhSingh-xs4dc
    @SaurabhSingh-xs4dc 3 месяца назад +1

    Needed this, thanks 🙏

  • @aboudeh_
    @aboudeh_ 3 месяца назад +1

    Thanks for the video broo we need AI and machine learning projects 🙃. like example trading algo or stock picker

  • @maneetchaudhary8253
    @maneetchaudhary8253 3 месяца назад

    What I feel you missed talking about in Hero Section is how is a single texture file 'textures/desk/screen.png' on two different mesh. Where is it mentioned that what portion of the texture image is to be used on which mesh?

    • @javascriptmastery
      @javascriptmastery  3 месяца назад +1

      Amazing question! If you open the image you'll notice its stretched a bit. Different parts of it correspond to different screens!

  • @onatemowofoluso3230
    @onatemowofoluso3230 3 месяца назад +2

    Thanks for this

  • @vyshnavek2871
    @vyshnavek2871 3 месяца назад +1

    You are awesome man "hats off "

  • @dami-dojo
    @dami-dojo 3 месяца назад +1

    I can’t thank you enough bro❤

  • @mjawale12345
    @mjawale12345 3 месяца назад +1

    My Willpower to be proficient in React and learn Nextjs is rising to do ur projects

  • @subramaniang.s2305
    @subramaniang.s2305 3 месяца назад +1

    Fan of your lovely Materials. Looking forward for a codesandbox clone as well

  • @Khekeli
    @Khekeli 3 месяца назад +1

    👀😂😂this is is the best RUclips

  • @KGPCH3rdYear
    @KGPCH3rdYear 3 месяца назад

    Love your content ❤

  • @sathirabandara7981
    @sathirabandara7981 3 месяца назад +1

    Amazing project ❤

  • @0xSmarter
    @0xSmarter 3 месяца назад +1

    Your video worth more that online paid courses

  • @ahmaddaani_
    @ahmaddaani_ 3 месяца назад +1

    please make a tutorial about svg animation on cards like on nextjs site

  • @IsaacOladimeji
    @IsaacOladimeji 3 месяца назад +2

    Excellent adrian

  • @prospermartial895
    @prospermartial895 3 месяца назад

    thanks adrian amazing video . pls post web 3 projects as well

  • @codingwithhassan1
    @codingwithhassan1 2 месяца назад

    Thanks a lot i have build this finally

  • @KartikVarshney-q8w
    @KartikVarshney-q8w 3 месяца назад

    Your videos are helpful and unique please make a project using Angular

  • @devanshsk7222
    @devanshsk7222 3 месяца назад +3

    Can you drop a tutorial in which you teach how you design these crazy designs from scratch.

  • @hoapooh0306
    @hoapooh0306 2 месяца назад

    2:54:20 Well that is a great joke. Anyway, thanks a lot Adrian for this wonderful 3d portfolio that you built here. I'm really appreciate your work.

  • @HTML_CSSandJS
    @HTML_CSSandJS 2 месяца назад +1

    4:26:16 When I visit this website, after Canvas Loader will be 100%, Hacker room and oyher 3 d objects can not be loaded, I can see "Something went wrong while loading this page". Why didn't you make it PWA?