How to Learn Three.js in 2024 ( Full Guide )

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

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

  • @visionary_3_d
    @visionary_3_d  Год назад +42

    Here's a technical roadmap which is NOT mentioned in the video with this much detail:
    - Blender
    - Shader Nodes
    - Geometry Nodes
    - *Focus on one thing at a time and get good at it!
    - Three.js
    - React Three Fiber ➜ if you know react already!
    - THREE.JS JOURNEY ➜ if you can pay for it; otherwise watch RUclips videos!
    - *Create Some Projects, Copy Good Art ➜ I'll show you how to do that in this video: ruclips.net/video/ixEPBzrhgTg/видео.html
    - Get Good At Shaders
    - Watch my videos! I have a playlist on shaders: ruclips.net/p/PLTEbuqk52pICikiHfD-a52dxEav5UqMLy
    - shadertoy.com/ is the place that'll make you a pro
    - Copy Blender's Shaders! I'll show you how to do that in this video: ruclips.net/video/Ydu4epKEM3I/видео.html
    - Simon Dev has a course on learning GLSL: simondev.teachable.com/p/glsl-shaders-from-scratch
    - *Shaders are hard at first! Keep going, start with the easy stuff / my videos. Make your own projects. Copy other people's ideas. That's how you get good.
    - Get Good At Javascript
    - Learn async programming
    - Multithreading
    - Caching, Memoization / Dynamic Programming ( simon dev's video: ruclips.net/video/6z4ePR7YYa8/видео.html )
    - Learn typescript.
    - Get Good At Math
    - Math is super important. Really Really Really Really Important. Understood ?
    - Good resource for math: ruclips.net/video/MOYiVLEnhrw/видео.html
    - Build a portfolio and get a job
    - Building a good portfolio is all about including the projects that you want to do in the future.
    You need to filter out the clients that you don't want to work with. That's the most important thing.
    - Get a job in the industry! Make good money and learn new things! Senior devs can teach you a lot.
    - Help others
    - Share what you know with others. You will learn even more things when you do that.
    - Create amazing things.
    - BONUS: Learn how to work with AI
    AI is changing the world. And you'll need to change too.
    I don't think AI is going to replace Devs for the next 5 years at least. ( probably that's not accurate LOL )
    But the important thing is becoming a master at what you do. AI will amplify the skills that you already have.
    That's it. Share your progress in your journey with me and others on twitter:
    twitter.com/3d_visionary

  • @ZanzasToys
    @ZanzasToys Год назад +55

    As someone with 20+ years experience in games/virtual world development, this is all *excellent* advice- especially the part about not jumping straight into ThreeJS until you've built up some experience with 3d tools first. I also love that you mention being careful about who you work for / with- that can make a huge difference, especially in one's early career. Really excellent content as always.

    • @visionary_3_d
      @visionary_3_d  Год назад +4

      Thanks sir! I appreciate the kind words ❤

  • @frankdearr2772
    @frankdearr2772 19 дней назад +1

    Great topic, thanks 👍

  • @agus2k147
    @agus2k147 Год назад +7

    Looking foward to buy your course! great content btw

  • @Dunc4n1d4h0
    @Dunc4n1d4h0 Год назад +5

    Part 6/2 gives little hope for humanity, great job! All best 🙂

  • @krish-ut9de
    @krish-ut9de 20 дней назад +1

    thank you sir

  • @ashishwaykar2838
    @ashishwaykar2838 7 месяцев назад +2

    me while enjoying this video : " pedro pedro pedro " LOL

  • @AdamLeis
    @AdamLeis 8 месяцев назад

    I agree with your take on learning Blender or something first. As I started learning 3JS, I noticed how I was just writing what the GUI was providing for me. That also helped me understand how I would make the GUI myself were I so inclined (and insane). Certainly that lesson made the other 3JS stuff learned stick better.

  • @_briantravis
    @_briantravis Год назад

    This was great! thank you!

  • @playinhertz
    @playinhertz 11 месяцев назад +4

    I used to be create stuff in blender earlier, i know c,c++, c#. What should i know before to learn 3js

    • @quebuena111
      @quebuena111 5 месяцев назад +1

      English

    • @playinhertz
      @playinhertz 5 месяцев назад +4

      @@quebuena111 just like you should learn "how to respect" . Little wanna be cool kid

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

      If you would prefer to use CPP/C in the browser try wasm w/ ecmasscripten.
      Otherwise learn webgl
      (an OpenGL-ES) to the point
      Where you understand the basics of the API and then
      Basically just is a JS framework like three.js. learning JS shouldn't be something that would take you longer than a week.

    • @playinhertz
      @playinhertz 5 месяцев назад

      @@jaymesc4436 thank you for replying, can u help me with this thing. I learned JS but whenever I try to make something without taking any reference my brain goes blank, I keep reading the same stuff but not helping, is their a way to overcome this.

    • @quebuena111
      @quebuena111 5 месяцев назад

      @@playinhertz sorry man, I apologize

  • @stiwart83
    @stiwart83 Год назад +2

    Thank you for hard work. I have a quick question, is possible use Three Js with Next Js or React with typescript? Regards!

    • @malikusman1961
      @malikusman1961 Год назад +2

      Yes you can use the wrapper "react-three/fiber" which allows you to create a three.js 3d environment inside your react/next js project.

    • @stiwart83
      @stiwart83 Год назад

      thanks!@@malikusman1961

    • @swknorth220
      @swknorth220 6 месяцев назад

      Yea I am currently learning three js from bruno Simon course and I am using typescript to make my 3d project morever he also covered the three js X react js using R3F.

  • @lovepeace-j7o
    @lovepeace-j7o 2 месяца назад

    Hi! I loved your video. I'm interested in creating interactive websites. So, can I think of it this way? That the flashy websites on the internet usually create 3D objects and animations through Blender, and then Three.js simply serves to bring those Blender files to the web? I’ve been trying to create objects with Three.js, but I feel like I’m not at the level to make the fancy things I want. Then I discovered Blender, which seems relatively easier for completing the results I want. Also, you mentioned that shaders are important-does that mean I need to be skilled in working with shaders in Three.js?

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

      The answer to all of your questions is yes, for most people!

  • @JC-jz6rx
    @JC-jz6rx 11 месяцев назад +3

    whats the job market look like for people who specialize in this now that the metaverse hype died down?I get mixed results on google

    • @visionary_3_d
      @visionary_3_d  11 месяцев назад +1

      Mainly things you can do with 3D Graphics. (Anything that has to do with real-time 3D rendering)
      E-commerce, unique 3d interactions, web games, etc...

  • @Andrew-qc8jh
    @Andrew-qc8jh Год назад +2

    Why do you suggest working with blender nodes? Is it specifically to build models to import into threejs?

    • @visionary_3_d
      @visionary_3_d  Год назад

      No. While you can use them to do that, what I meant was that it's going to give you a better understanding of how shaders work. Which is really important.

    • @Andrew-qc8jh
      @Andrew-qc8jh Год назад

      @@visionary_3_dno they won't its a waste of time in comparison to so many other things people can learn

    • @visionary_3_d
      @visionary_3_d  Год назад

      @@Andrew-qc8jh Give me a few examples.
      I'll perhaps mention them in future videos.

    • @Andrew-qc8jh
      @Andrew-qc8jh Год назад +1

      @@visionary_3_dno do your own research

    • @visionary_3_d
      @visionary_3_d  Год назад +3

      @@Andrew-qc8jh Okay boss 😂

  • @brookestephen
    @brookestephen 4 месяца назад +2

    i have lots of experience with VRML 2 and X3D and loads of javascript - will that help, or hurt me learning Three.js?

  • @angeldavid4966
    @angeldavid4966 6 месяцев назад

    I appreciate the info, but my favorite part is that you talked about teaching others, you my friend have gained the answer of this random internet user

  • @manojr5257
    @manojr5257 Год назад +1

    Hey Arya, what about Verge3D? Is it good

  • @MrBumbo90
    @MrBumbo90 Год назад +6

    I am coming along the journey with you. However, I have one question. Isn't 90% of the work all about the blender 3d model that you start with? Sure shaders are super important but you can do 90% of what you want with a good 3d model and basic 3js skills. I am only 40% into Bruno's course and this is the impression that I got.

    • @visionary_3_d
      @visionary_3_d  Год назад +10

      Depends on what you wanna do.
      so that's the question to ask yourself.
      What do you want to do ?
      if you want to create a portfolio like the one that bruno created, then the models and prebaked textures play a big role
      if you want to create an interactive website with tons of visual effects, shaders are going to be handy
      if you want to create complex games all of the above will be important, aaaand you also need to be able to write algorithms with JS
      Shaders will give you the ability to create real time materials...
      This means that if you do this well you'll be able to create real-time effects that would be impossible to create with prebaked textures
      if you want to create an ecommerce website with Three.js then prebaked textures can actually play a huge role because you might care about good performance
      so first, you should ask yourself, what do I want to do.

  • @ariandane7631
    @ariandane7631 Год назад +4

    I’m new to three js. I have baught the course but besides that everything on RUclips particularly seems really outdated. I see videos about three but it’s at minimum 2 years old.

    • @visionary_3_d
      @visionary_3_d  Год назад +1

      Actually the api is pretty stable and not much has changed.... ( it'll change very soon tho bcz of WebGPU )
      Also...
      find better videos...
      Alsooo ...
      watch my videos 😌

  • @navid_bgh
    @navid_bgh Год назад

    Nice ✌️🔥

  • @denberno
    @denberno Год назад +1

    Hello! I want your advice. Where to start diving into three js? I want to study this direction as deeply as possible. At the moment my skills are html, css, react, typescript.

  • @samiullahsheikh5015
    @samiullahsheikh5015 8 месяцев назад +4

    I am MERN stack developer and now exploring the Threejs. Learn blender seems dunting to me 😅
    Do you still believe i should start from blender or cover theory of the topics you mentioned in your video would be enough to get started from point 2

  • @LaFarticusWinnigins
    @LaFarticusWinnigins 4 месяца назад

    why do you not use react-three-fiber in your projects? whats the advantage or benefits of using three.js to build a site vs R3F ?

    • @visionary_3_d
      @visionary_3_d  4 месяца назад +1

      My biggest reason is that It reduces portability.
      I might not be able to use R3F in my other projects.
      I am also not in favour of installing a UI library to make a web game or experience.

  • @xxcrypt234
    @xxcrypt234 Год назад +1

    thanks bro

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 Год назад +2

    do you take online private classes to teach blender and threejs ?

    • @visionary_3_d
      @visionary_3_d  Год назад +3

      At this moment no. My tutorials is pretty much all you have 🙃

  • @IMO9790
    @IMO9790 28 дней назад

    is java the only programing language you need to learn for three.js?

    • @visionary_3_d
      @visionary_3_d  28 дней назад

      JavaScript.
      and yes... at least in the short term.
      for shaders you would need to learn shading language ( GLSL or WGSL or TSL ).

  • @lowEndAppsAndGames
    @lowEndAppsAndGames 6 месяцев назад

    Can you insert complex textures to 3js , 3js seem messed up on my own perspective
    They should rethink how they build it.

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

    Hello world!

  • @sammmammm
    @sammmammm 8 месяцев назад

    Can we not simply import scenes from blender to Three.js, instead of coding 3D scenes?

    • @visionary_3_d
      @visionary_3_d  7 месяцев назад +1

      There are some tools that do that to some extent but ultimately if you want control and consistency you need to write code.

  • @TomdeVisser-h3x
    @TomdeVisser-h3x 11 месяцев назад

    Have you dropped the course yet?

  • @professor_ozzy
    @professor_ozzy Год назад +1

    If I learn this in what kind of industry I can work?

    • @visionary_3_d
      @visionary_3_d  Год назад +3

      Mainly 3D Web Dev.
      But learning 3D, will help you in any 3D Graphics industry you can think of.
      Game dev ( Unreal, Unity ), Metaverse projects, Vr and Ar projects, etc...

    • @OcielGonzalez_mx
      @OcielGonzalez_mx Год назад

      Ty very much!@@visionary_3_d

  • @udiiiiiit5020
    @udiiiiiit5020 Год назад +5

    Hey Arya, I started with Bruno's course but haven't made something of my own till now.
    I have just started with shaders lesson.
    I feel like before starting with shaders I should make one or two projects with what I've learnt.
    The thing is I know nothing about react. Should I learn react before r3f?
    Also please share some resources to learn r3f from youtube.
    Thanks!

    • @visionary_3_d
      @visionary_3_d  Год назад +1

      Yes. Definitely practice along the way.
      Create your own projects.
      Don't learn too many things at once.
      You can learn react later if you want.
      React is complicated on its own and yes, you need to know react before you learn r3f.

  • @youssefkhaled1189
    @youssefkhaled1189 8 месяцев назад +1

    thank you

  • @juanbadano
    @juanbadano Год назад +1

    Thanks for the video and please get an anti-pop filter for that mic 😭

  • @nickcarvajal
    @nickcarvajal Год назад +3

    Very well said! I agree with Shaders. I'm definitely at the bottom lolll but thanks to your video I'm learning! CREATE COOL SHIT LADIES AND GENTS!

    • @visionary_3_d
      @visionary_3_d  Год назад

      I'm glad you're improving!
      Keep Going 🔥

  • @gohira13
    @gohira13 Год назад +3

    Where is the best place to learn Blender? Do you have some recomendations? Amazing video and thanks for sharing your knowledge🙏

    • @visionary_3_d
      @visionary_3_d  Год назад +4

      Yes! Blender Guru's Donut tutorial series is the best place to start.
      Just search it on RUclips. It's free!

    • @reversestudios1055
      @reversestudios1055 Год назад +1

      A bit if a late reply but just follow tutorials until you get a grasp of the controls, and then start modeling on your own, they’ll be stuff you won’t know how to do but you can research them, and with enough time you’ll become proficient

  • @ssshen5807
    @ssshen5807 Год назад +1

    I'm currently at level 4, but don't know what to create

    • @visionary_3_d
      @visionary_3_d  Год назад

      It's hard to continue from this point without having clear direction.
      Take some time to see what you'd like to do in the future ( researching other people's projects can help ) and set some goals.
      This is quite important because if you try to reach everybody with your portfolio you'll reach nobody.

  • @amirkakavand1019
    @amirkakavand1019 8 месяцев назад

    Thank you for the good video. You said you don't use R3F, now I wonder what you use yourself? Is it vanilla three.js or something else?

    • @visionary_3_d
      @visionary_3_d  8 месяцев назад +1

      Yes, it’s js only ( ts )

    • @amirkakavand1019
      @amirkakavand1019 8 месяцев назад

      @@visionary_3_d may I know why? Could it possibly be because you have more control with raw three.js?

    • @visionary_3_d
      @visionary_3_d  8 месяцев назад +1

      ​@@amirkakavand1019 TBH for me it's easier to understand what's happening when I'm not mixing a UI framework with a 3D framework.
      It's a little bit more organized and clean for me at least.

    • @amirkakavand1019
      @amirkakavand1019 8 месяцев назад

      @@visionary_3_d makes sense

    • @ze2like
      @ze2like 4 месяца назад +1

      ​@@visionary_3_dThanks a lot for all those useful tips. As someone coming from game engines (and also a react dev in my day-to-day job), developing my engine would be my preferred route too. Could you please expand a little on how one would build a game engine out of a renderer such as threejs ? More specifically, I was thinking about using 3D objects's userData to maintain a reference to model entities, in order to separate simulation from rendering... Would you consider it a good practice? Is there a better option?

  • @pydi99
    @pydi99 Год назад +3

    My javascript and react skills are intermediate, is it ok if I start with react-three-fiber directly?

    • @visionary_3_d
      @visionary_3_d  Год назад

      That's exactly what I did.
      I started with this video : ruclips.net/video/fdtqqyeKRJk/видео.html
      It's two years old so you might be able to find newer tutorials

  • @RajaRaja-pq4oj
    @RajaRaja-pq4oj Месяц назад +1

    TQ

  • @Dont_Lie_please
    @Dont_Lie_please Год назад

    thanks

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

    and Here I am Blender Enthusiast for more than 3 years(watching tutorials for most of the time), turned frontend developer, need to submit working 3D Avatar on our website, trying to learn threeJs and first suggestion this guy gives don't learn

  • @amshenyesudas
    @amshenyesudas Год назад

    Great tutorial 🔥🔥🔥🔥

  • @CodingKarleBKL-lj3hx
    @CodingKarleBKL-lj3hx 18 дней назад +1

    11th December, 2024

  • @atomauro
    @atomauro Год назад +1

    Muchas thanksyou para ti

  • @atomauro
    @atomauro Год назад

    i love you papito lindo

  • @jojustchilling
    @jojustchilling Год назад

    We don’t talk about Bruno, no, no, no.

  • @TheMatjo
    @TheMatjo 6 месяцев назад

    Bro, not to sound offensive but you're giving garbage advice. Why? When is the last time you saw a job ad for a "threejs developer"? Name at least 5.
    Threejs is just a tool for adding 3d to your website, nothing more. A usefull tool but not enough to create an industry need. If you're after money, frameworks like React, Vue or Angular, now that's where the money is at. If you wanna do 3d, your best bet is to stick to unity, unreal or godot. Don't use tools, use frameworks my dude

    • @visionary_3_d
      @visionary_3_d  6 месяцев назад

      Alright.

    • @TechCoder-f3y
      @TechCoder-f3y 3 дня назад +1

      been doing react for 2 years ,i never got a job i got stuck at freelancing ,i made a profile using three js after 1 month of learning ,i got contacted by countless companies and nailed my first job ,the way to get hired is to do something special others don't ,don't look at what companies ask for it's a lie ,90% of jobs require entry level

  • @ZeroCTRLX
    @ZeroCTRLX 5 месяцев назад

    great video, tho, i feel it was narated by Bugs bunny for some reason

    • @visionary_3_d
      @visionary_3_d  5 месяцев назад

      at this point in my career I did not know how to edit audio files 🤣🤣