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

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 พ.ย. 2024

ความคิดเห็น • 450

  • @javascriptmastery
    @javascriptmastery  2 หลายเดือนก่อน +48

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

    • @ai-whisperer
      @ai-whisperer 2 หลายเดือนก่อน

      Can you please share the link for both the Space and the Juuni websites?

    • @brunofelix5434
      @brunofelix5434 2 หลายเดือนก่อน

      It is an excellent IDE

    • @MohamedAwais-y3l
      @MohamedAwais-y3l 2 หลายเดือนก่อน

      Thanks for web storm License. For me it's valid till December. Generous time period to become fan of it.

    • @EmekaNwadiogbu-nl5zb
      @EmekaNwadiogbu-nl5zb 2 หลายเดือนก่อน

      @@raymondmichael4987 hahaha I like this response.. lol

    • @ПотужнийНезламізм
      @ПотужнийНезламізм หลายเดือนก่อน

      I like Webstorm but it eats insane amount of RAM, so switched to LazyVim

  • @shahnoormujawar6825
    @shahnoormujawar6825 2 หลายเดือนก่อน +330

    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 TH-cam for free, you may not be getting much in return, but one thing is for sure - God will reward you.

    • @javascriptmastery
      @javascriptmastery  2 หลายเดือนก่อน +32

      That is awesome!

    • @ChaimaaTEDJARI
      @ChaimaaTEDJARI 2 หลายเดือนก่อน +6

      Congratulations 🎉

    • @Karanpatel-kv6rb
      @Karanpatel-kv6rb 2 หลายเดือนก่อน +4

      Congratulations 👏🎉

    • @mjtech4243
      @mjtech4243 2 หลายเดือนก่อน +4

      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 2 หลายเดือนก่อน +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 2 หลายเดือนก่อน +92

    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  2 หลายเดือนก่อน +8

      Happy to help!

    • @Shivam-ii2wr
      @Shivam-ii2wr หลายเดือนก่อน

      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 หลายเดือนก่อน +1

      conrgats !
      are you frontend developer?

  • @Jaleel_
    @Jaleel_ หลายเดือนก่อน +11

    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 หลายเดือนก่อน +7

    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!

  • @Historytip
    @Historytip หลายเดือนก่อน +3

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

  • @kenshalom6098
    @kenshalom6098 หลายเดือนก่อน +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

  • @shadowslayer2248
    @shadowslayer2248 2 หลายเดือนก่อน +9

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

  • @MvKidow
    @MvKidow 11 วันที่ผ่านมา

    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.

  • @ManoKuerten
    @ManoKuerten หลายเดือนก่อน +1

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

  • @TechthroughAges
    @TechthroughAges 2 หลายเดือนก่อน +6

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

  • @sanaan0168
    @sanaan0168 หลายเดือนก่อน +4

    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

  • @wasiqonly
    @wasiqonly หลายเดือนก่อน +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!

  • @ПотужнийНезламізм
    @ПотужнийНезламізм หลายเดือนก่อน +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!

  • @alejandromontesdeoca4575
    @alejandromontesdeoca4575 19 วันที่ผ่านมา

    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

  • @gouravkumarbehera1894
    @gouravkumarbehera1894 2 หลายเดือนก่อน +3

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

  • @PRS_Code
    @PRS_Code 2 หลายเดือนก่อน +6

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

  • @rifathossain328
    @rifathossain328 หลายเดือนก่อน +1

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

  • @alvinpeter1166
    @alvinpeter1166 2 หลายเดือนก่อน +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  2 หลายเดือนก่อน +1

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

  • @matthewwilliams2483
    @matthewwilliams2483 29 วันที่ผ่านมา

    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!

  • @Yesterday_i_ate_rat
    @Yesterday_i_ate_rat 2 หลายเดือนก่อน +2

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

  • @IsaacOladimeji
    @IsaacOladimeji หลายเดือนก่อน +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!!!🚀🚀🚀🚀🚀🚀

  • @Dr_PhilK
    @Dr_PhilK 2 หลายเดือนก่อน +2

    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 😂

  • @TJOEL5
    @TJOEL5 หลายเดือนก่อน +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

  • @artyCrafty4564
    @artyCrafty4564 หลายเดือนก่อน

    @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

  • @abdulateef-da-designer
    @abdulateef-da-designer 2 หลายเดือนก่อน +2

    Another masterpiece from our brethren 💯
    Thanks so much Adrian

  • @kodekata
    @kodekata 23 วันที่ผ่านมา

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

  • @mehmetkoyuncuoglu1647
    @mehmetkoyuncuoglu1647 หลายเดือนก่อน

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

  • @ahmedahmedx9600
    @ahmedahmedx9600 2 หลายเดือนก่อน +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 ❤❤❤❤❤❤❤❤❤❤❤❤

  • @MindJammerson
    @MindJammerson หลายเดือนก่อน

    Absolute legend I just finished making everything what a journey

  • @PemaWangchuk-w7y
    @PemaWangchuk-w7y 2 หลายเดือนก่อน +7

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

  • @antonioskokiantonis7051
    @antonioskokiantonis7051 14 วันที่ผ่านมา

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

  • @dontmovemf
    @dontmovemf 2 หลายเดือนก่อน

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

  • @akashkrishna1043
    @akashkrishna1043 2 หลายเดือนก่อน +2

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

  • @MohamedAshraf-p6i
    @MohamedAshraf-p6i 2 หลายเดือนก่อน +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

  • @BahaaAldein10
    @BahaaAldein10 2 หลายเดือนก่อน +1

    You are the best TH-camr, teaching incredible methods like this. 💗💗💗

  • @PatrickMohammed-p3l
    @PatrickMohammed-p3l 2 หลายเดือนก่อน +4

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

  • @bislan-aranyan
    @bislan-aranyan 2 หลายเดือนก่อน +1

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

  • @godofeternals
    @godofeternals 2 หลายเดือนก่อน +5

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

  • @luciusmori5878
    @luciusmori5878 2 หลายเดือนก่อน +1

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

  • @solomonimhomoh1056
    @solomonimhomoh1056 2 หลายเดือนก่อน +4

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

  • @wahidSLIMANI-p7k
    @wahidSLIMANI-p7k หลายเดือนก่อน

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

  • @247aakashpavar6
    @247aakashpavar6 2 หลายเดือนก่อน +127

    Bro is not pregnant but delivers always. 🍻

    • @QwecySlim
      @QwecySlim 2 หลายเดือนก่อน +4

      Baaars

    • @DoingCoding
      @DoingCoding 2 หลายเดือนก่อน +4

      It's old one think new one.

    • @kushalmondal618
      @kushalmondal618 2 หลายเดือนก่อน +1

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

    • @RR-xb1nh
      @RR-xb1nh 2 หลายเดือนก่อน

      cringe

    • @247aakashpavar6
      @247aakashpavar6 2 หลายเดือนก่อน +3

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

  • @sureshsingh9880
    @sureshsingh9880 2 หลายเดือนก่อน +3

    Javascript wizard is back ❤❤❤❤

  • @saidulislamrana3322
    @saidulislamrana3322 13 วันที่ผ่านมา

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

  • @vighneshshukla3331
    @vighneshshukla3331 2 หลายเดือนก่อน +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!

  • @alichekarda19
    @alichekarda19 2 หลายเดือนก่อน +1

    The best developer in the world ❤

  • @ichiroutakashima4503
    @ichiroutakashima4503 2 หลายเดือนก่อน +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.

  • @404-not-found-service
    @404-not-found-service 2 หลายเดือนก่อน +1

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

  • @Gamage-z1z
    @Gamage-z1z 2 หลายเดือนก่อน +2

    Great ❤ Is this responsive?

  • @LucidFort
    @LucidFort 2 หลายเดือนก่อน +1

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

  • @OngieDefistlady
    @OngieDefistlady 2 หลายเดือนก่อน +1

    I am in love with this channel

  • @ANONYMOUS-qx4yx
    @ANONYMOUS-qx4yx 2 หลายเดือนก่อน +19

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

  • @abwebmaster3
    @abwebmaster3 2 หลายเดือนก่อน +1

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

  • @BeyondNoise9
    @BeyondNoise9 หลายเดือนก่อน

    Although people never share their secrets but can you please tell how do you master all these tech ? Like going through docs, practicing etc ?

  • @BeyondNoise9
    @BeyondNoise9 หลายเดือนก่อน

    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 ❤

  • @TimeAiTales
    @TimeAiTales 2 หลายเดือนก่อน +18

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

    • @javascriptmastery
      @javascriptmastery  2 หลายเดือนก่อน +8

      Practice makes perfect!

    • @codingandEnglishlearning
      @codingandEnglishlearning 2 หลายเดือนก่อน +3

      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 2 หลายเดือนก่อน +1

      @@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 หลายเดือนก่อน

      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.

  • @KrishnaList
    @KrishnaList 13 วันที่ผ่านมา

    Create a project Microservice with CQRS DDD,event sourcing using nextjs mongodb using Api gateway and load balancer

  • @davidwright450
    @davidwright450 หลายเดือนก่อน

    Please try to make a in depth tutorial of GSAP animation.

  • @enes5509
    @enes5509 2 หลายเดือนก่อน +1

    Well, as always,
    Adrian never disappoints.

  • @KartikVarshney-q8w
    @KartikVarshney-q8w หลายเดือนก่อน

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

  • @MohamedAwais-y3l
    @MohamedAwais-y3l 2 หลายเดือนก่อน +1

    WOW. this is called portfolio. Webstorm, new experience.

  • @HTML_CSSandJS
    @HTML_CSSandJS 14 วันที่ผ่านมา +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?

  • @LordMoopCow
    @LordMoopCow 12 วันที่ผ่านมา

    Hello sir, great video. Is there a way to get the same autocomplete/autoimport functionality in VS code? I notice all the type helper and autocomplete/autoimport you have in your IDE does not occur in VS Code unfortunately. Thanks love your channel.

  • @ahmaddaani_
    @ahmaddaani_ หลายเดือนก่อน +1

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

  • @prospermartial895
    @prospermartial895 หลายเดือนก่อน

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

  • @maneetchaudhary8253
    @maneetchaudhary8253 หลายเดือนก่อน

    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  หลายเดือนก่อน +1

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

  • @codingwithhassan1
    @codingwithhassan1 11 วันที่ผ่านมา

    Thanks a lot i have build this finally

  • @UjjwalSharma.861
    @UjjwalSharma.861 หลายเดือนก่อน +1

    Hey i know MERN stack can i continue with this ,or i shall first learn Next.js

  • @Zaza_software
    @Zaza_software 2 หลายเดือนก่อน +1

    You have helped many soul thank you so much

  • @devanshsk7222
    @devanshsk7222 2 หลายเดือนก่อน +3

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

    • @javascriptmastery
      @javascriptmastery  2 หลายเดือนก่อน +1

      I have a master designer! 😊

  • @marcioandre6469
    @marcioandre6469 2 หลายเดือนก่อน +1

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

  • @EmilGasanov-v7q
    @EmilGasanov-v7q หลายเดือนก่อน +1

    hi, it would be cool if you did such cool projects using state management like suztand or redux

  • @ahmedahmedx9600
    @ahmedahmedx9600 20 วันที่ผ่านมา

    please can you make video building portfolio using spline ? thanks

  • @hariii9912
    @hariii9912 13 วันที่ผ่านมา

    Do i need to update code for Next Js ? Or it will work same

  • @subramaniang.s2305
    @subramaniang.s2305 2 หลายเดือนก่อน +1

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

  • @benielsmile3355
    @benielsmile3355 2 หลายเดือนก่อน +1

    The master in action

  • @Code..188
    @Code..188 2 หลายเดือนก่อน +2

    This is wonderful thanks ❤

  • @SaifUllah-xd2ds
    @SaifUllah-xd2ds หลายเดือนก่อน

    Will Ultimate Three JS be on youtube?

  • @yomari5479
    @yomari5479 หลายเดือนก่อน

    what is the extension you're using to show the fields you're adding ?

  • @Zappango
    @Zappango หลายเดือนก่อน

    Sir Adrian ,why dont you use Nextjs 14 with Three.js ???is any issue with that?

  • @PrakashChAwal
    @PrakashChAwal 23 วันที่ผ่านมา

    Thanks for this awesome tutorial. My problem is that I only see white screen when I open the .html file. The code is exactly same. I even copied from official three.js tutorial.

  • @onyedikachiozoani
    @onyedikachiozoani 2 หลายเดือนก่อน +1

    So eager to watch this.

  • @FedoxDieEnte
    @FedoxDieEnte 2 หลายเดือนก่อน +1

    Love to learn more about threejs!

  • @krishna-my983
    @krishna-my983 2 หลายเดือนก่อน

    I am an angular developer. I don't want to switch to ReactJs for now. Can I follow this tutorial fully and build it with Angular with wherever alternatives possible?

  • @Code..188
    @Code..188 2 หลายเดือนก่อน

    Can you tell me about these images? Did you get them from somewhere, or did you make them on your own?

  • @olawunitemitope2738
    @olawunitemitope2738 2 หลายเดือนก่อน +1

    Thanks, please can you introduce testing(jest) in your upcoming tutorial?

  • @nicolettifps
    @nicolettifps 2 หลายเดือนก่อน +1

    UHUUUUU MORE THREEJS MASTERPIECE!!!!

  • @onatemowofoluso3230
    @onatemowofoluso3230 2 หลายเดือนก่อน +2

    Thanks for this

  • @Bangadhipati
    @Bangadhipati 2 หลายเดือนก่อน

    Sir its a request can you please create a futuristic portfolio page with a blog section and teach us how to add blogs in it 🙏

  • @OPGAMER.
    @OPGAMER. 2 หลายเดือนก่อน +2

    Another banger. Let's go 🚀

  • @BikashMIshra-y2p
    @BikashMIshra-y2p 24 วันที่ผ่านมา

    Could you please make a tutorial to make a website like eyes on asteroid.

  • @affiliatepaid747
    @affiliatepaid747 หลายเดือนก่อน +2

    You are the GOAT 🐐🐐🐐

  • @IagoCech
    @IagoCech หลายเดือนก่อน

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

  • @Mohhit05
    @Mohhit05 หลายเดือนก่อน

    Thank you Sir for making these types of amazing content

  • @FreeFormTalks
    @FreeFormTalks 16 ชั่วโมงที่ผ่านมา

    If you add this all of your animation works it's because mixamo adds a prefix to the name : const cleanAnimationTrackNames = (animations, prefixToRemove) => {
    animations.forEach((animation) => {
    animation.tracks.forEach((track) => {
    if (track.name.startsWith(prefixToRemove)) {
    track.name = track.name.replace(prefixToRemove, '');
    }
    });
    });
    };
    idleAnimation[0].name = "idle";
    cleanAnimationTrackNames(idleAnimation, "mixamorig");
    Hopefully it helps !!!

  • @3illanon145
    @3illanon145 หลายเดือนก่อน +1

    i couldn't find the gltf converter in the guide what is the name ? can you add a link

  • @yunholing760
    @yunholing760 21 วันที่ผ่านมา

    Newbie here, could you please give a hint on how to make it work on mobile as well?

  • @SonuCartoon_9917
    @SonuCartoon_9917 2 หลายเดือนก่อน +1

    Congrats you completed 150 video on TH-cam 🎉

  • @hfg16
    @hfg16 13 วันที่ผ่านมา +1

    can i use vscode since its free not only for 90 days

    • @javascriptmastery
      @javascriptmastery  13 วันที่ผ่านมา +2

      Yes, but webstorm just became free