How to Learn Three.js in 2024 ( Full Guide )
Summary
TLDRThis video script offers a comprehensive roadmap for beginners in 3D graphics, emphasizing the importance of understanding 3D scene composition before diving into Three.js. It suggests starting with Blender to grasp the basics of 3D scene creation and then progressing to Three.js, a rendering API, not a game engine. The script outlines different learning paths, including paid courses and free resources, and highlights the significance of mastering shaders to create stunning 3D experiences. It concludes by encouraging viewers to choose their niche, build a unique portfolio, and eventually teach others, fostering a supportive community.
Takeaways
- 📚 Start with the basics: Beginners should not jump straight into Three.js (3JS) without understanding the fundamentals of 3D graphics.
- 🎨 Learn with Blender: Using a software like Blender to learn about 3D scene composition is recommended before diving into 3JS.
- 🛠️ Focus on Key Concepts: In Blender, concentrate on lighting, geometry creation, materials, and especially the Shader and Geometry Node tabs.
- 🌐 Understand 3JS: Recognize that Three.js is a rendering API and not a game engine like Unity or Unreal.
- 🔗 Leverage React: If familiar with React, using React Three Fiber can be a quick start to learning the basics of 3JS.
- 📚 Invest in Learning: Bruno Simon's 'Three.js Journey' course is highly recommended for a structured learning path in 3JS.
- 🆓 Free Learning Path: For those who prefer not to pay, learning the topics covered in the 'Three.js Journey' course through free resources is an option.
- 🎨 Improve Shader Skills: Enhancing shader skills can significantly elevate the quality of 3D scenes created with 3JS.
- 🛠️ Choose Your Path: At advanced levels, decide on a specialization such as web development, game creation, shader artistry, or tool development.
- 💼 Build a Portfolio: Creating a unique portfolio is crucial for standing out and securing a job in the industry.
- 👨🏫 Teach and Learn: Sharing knowledge by teaching others not only contributes to the community but also enhances one's own understanding and skill.
Q & A
What is the common mistake beginners make when starting to learn Three.js?
-The common mistake is starting to learn Three.js without understanding the basics of 3D graphics. It's recommended to learn a software like Blender first to grasp the concepts of 3D scene composition.
Why is it suggested to learn Blender before Three.js?
-Learning Blender first can help in understanding the basics of 3D graphics such as lighting, creating geometry, and materials, which is beneficial when transitioning to Three.js.
What are the key areas to focus on when learning Blender according to the script?
-The key areas to focus on in Blender are the Share Note Tab, the Geometry Node Tab, lighting, creating geometry, and materials.
What does the speaker believe Three.js is, and how does it differ from game engines like Unity or Unreal?
-The speaker believes Three.js is a rendering API rather than a game engine. It does not offer the same functionalities as Unity or Unreal and is focused on rendering objects within the HTML DOM.
What are the two routes suggested for learning the Three.js API?
-The two routes are the paid route, which involves buying Bruno Simon's course 'Three.js Journey', and the free route, which involves self-study using online resources and tutorials.
Why is it important to focus on shader skills when advancing in Three.js?
-Focusing on shader skills is important because it can significantly enhance the quality of 3D scenes and projects, setting them apart from others.
What is the speaker's advice for those who have reached level three in the Three.js roadmap?
-At level three, the speaker advises to focus heavily on shader skills and to watch educational videos, including a three-hour crash course on shaders, to improve and understand the basics.
What does the speaker suggest for someone at level four of the Three.js roadmap?
-At level four, the speaker suggests choosing a specific direction such as creating websites, games, becoming a shader artist, or developing tools, and building a unique portfolio.
What is the significance of level five in the Three.js roadmap according to the script?
-Level five is about getting a job in the industry, which requires high standards and joining a team that can impact one's personality and technical skills.
What are the two things the speaker recommends doing at level six of the Three.js roadmap?
-At level six, the speaker recommends creating cool projects with one's mastery and teaching others what they know, either through a YouTube channel, blog posts, or other means.
How does the speaker plan to support the community learning Three.js?
-The speaker plans to support the community by building a Discord server for discussions, answering questions, and sharing knowledge.
Outlines
📚 Learning 3D Graphics with Blender and 3GS
The video script discusses common mistakes beginners make when learning 3D graphics and the Three.js (3GS) library. The speaker emphasizes the importance of understanding 3D graphics basics before diving into 3GS, suggesting starting with Blender to learn about 3D scene composition. They highlight the need to focus on Blender's Share Note Tab and Geometry Node Tab for foundational knowledge. The script outlines a roadmap with different levels, starting from JavaScript coding knowledge to understanding 3D graphics, and then moving on to 3GS. The speaker also mentions that 3DS is a rendering API rather than a game engine and provides different paths for learning 3GS, including React Three Fiber for those familiar with React, and recommends either purchasing Bruno Simon's course or learning from free resources online.
🚀 Advancing to Mastery in 3D Graphics and 3GS
This paragraph continues the roadmap for mastering 3D graphics and 3GS, focusing on the importance of shader skills for creating visually impressive projects. The speaker encourages viewers to watch their YouTube tutorials for a crash course in shaders and announces an upcoming course to advance to a professional level. The script then discusses the next levels of the roadmap, which involve creating amazing 3D experiences with 3GS, choosing a personal path, building a unique portfolio, and eventually getting a job in the industry. The speaker also touches on the importance of high standards and the impact of the team on personal and technical growth. The video concludes with advice on reaching the top one percent of developers, creating impactful work, and sharing knowledge with others, while also inviting viewers to join a Discord server for community interaction.
Mindmap
Keywords
💡3GS
💡Beginners
💡Roadmap
💡JavaScript
💡Blender
💡Rendering API
💡React Three Fiber
💡Three.js Journey
💡Shaders
💡Portfolio
💡Discord Server
Highlights
Beginners often make the mistake of starting to learn Three.js without understanding the basics of 3D graphics.
Learning a software like Blender first can be beneficial as it teaches 3D scene composition.
It's important to focus on lighting, geometry creation, and materials in Blender to prepare for Three.js.
The Share Note Tab and Geometry Node Tab in Blender are essential for understanding 3D graphics.
Three.js is a rendering API, not a game engine, and is used to render on the HTML canvas.
For those familiar with React, React Three Fiber can be a quick start to learning Three.js.
Bruno Simon's course 'Three.js Journey' is recommended for a structured learning path.
Free learning routes are available but require more self-guided effort.
Focusing on shader skills can significantly improve the quality of Three.js projects.
The speaker is working on a course to teach shader skills from scratch to professional level.
At level four, choose your path in 3D experiences, whether it's web design, gaming, or shader art.
Creating a unique portfolio is crucial for standing out and getting the desired job.
Level five involves getting a job in the industry and the importance of the team you join.
Level six represents being in the top one percent of developers and the importance of creating and teaching.
The value of teaching others to learn more and contribute to the community.
The establishment of a Discord server for community interaction and support.
Transcripts
huge mistake that beginners make when
they want to learn 3GS is that they
start with learning 3GS hey guys in this
video we're going to be talking about
the three just roadmap and I'm going to
show you one of the paths that you can
take to get good with 3GS now keep in
mind that this roadmap is designed by Me
based on my experiences so you should
take everything I say with a grain of
salt and now with that being said let's
get started so this road map has
different levels and level one is where
you know how to code with JavaScript now
many people at this stage start with
learning 3GS and that's a mistake as I
said in the intro I think many people
here don't really understand the basics
of 3D graphics and when you know nothing
about 3D Graphics learning 3GS can be
very difficult so learning a software
like blender first can be a great
starting point because it teaches you
how to think about composing a 3D scene
and it really doesn't matter if you
learn blender first or three just first
also ultimately you will need to learn
it so some of the things that you need
to focus on in blender is the basics of
lighting the basics of creating geometry
creating materials and uh more
specifically you need to focus on the
share Note Tab and the geometry node tab
so these are some of the things that are
very important if you understand some of
these things you will have a much easier
time at learning 3GS
okay so level two now is where you know
how to make good looking scenes in
blender and this is the important thing
about blender right uh you will learn
how to make good looking scenes with it
and now you can start learning 3GS so
3DS is basically a rendering API in my
opinion it's not a game engine it's not
like Unity or unreal it's not even close
it's just a rendering API it gives you
the ability to render things on the
canvas within your HTML Dom now there
are a couple of paths that you can take
to learn the 3Gs in my opinion if you
know react uh you can get started with
reactory fiber really quickly and learn
the basics there this is what I did and
I think react 3 fiber gives you the
correct amount of abstraction when you
want to get started now I don't use
reactor fiber in my projects but I think
it can be a fantastic starting point so
now for landing the actual 3GS API you
will have two routes one route is the
page route which will get you started
quicker and the other route is the free
route so with the page route uh you
should buy Bruno Simon's course on 3GS
it's called three just Journey it's a
fantastic course it has a lot of
positive reviews and I've watched it
myself it's fantastic for getting
started now if you don't want to pay
that money and you want to go the free
route that's also possible so what you
will need to do is go into three just
Journey website and see the topics that
are covered in that course and you can
what you can do simply is you can learn
all of those topics yourself now uh
there are YouTube tutorials out there
that will teach you the basics as well
as my videos which will teach you the
basics of shares but you have to keep in
mind that with the free routes you have
to do the heavy lifting yourself and uh
I think if you if you can invest in the
course definitely do it and okay now you
are at level three where you know how to
create an okay looking scene in Three
and you understand the basics of 3GS and
three Graphics now this is the parts
that you should heavily focus on your
share skills because if you learn how to
write great shares other people's
projects will be here and yours will be
here the difference will be enormous
and for learning the basics of shares
you can watch my videos here on YouTube
I have a full three hour crash course
which you can go ahead and watch and the
good news for you is that right now I'm
working on a course about shakers which
will take you from xero to being able to
work full-time as a shared artist so
follow me on Twitter and hit the Bell
icon here on YouTube to get notified
when I drop that course and moving on
now you are at level four this is where
you know how to create amazing 3D
experiences with 3GS and this is where
you kind of need to choose your own path
you might want to create amazing
websites you might want to create games
on the web you might want to become a
share artist you might want to I don't
know create tools like blender but on
the web so you need to kind of choose
which direction you want to go into and
this decision is essential because it
will help you create your own unique
portfolio and I am going to make a video
on how to make your own own unique
portfolio to get the job that you want
to get because with with creating a
portfolio what you want to do is you
want to filter out the clients that you
don't want and I'm going to talk about
this more in that video and Now ladies
and gentlemen this is the part that
you've been building yourself up for
level five is where you get a job in the
industry and this part will definitely
needs its own dedicated video but what I
will say in this video is half high
standards and the team that you will be
joining will hugely impact your
personality and your technical skills
and now when you gain more experience in
the real world if you work on your
skills you will reach level six level
six is where you are in the top one
percent of developers and now there's
only two more things that is left for
you to do one is creating cool and
uh with your current skill level you are
a master at what you do and you should
use that skill to create amazing stuff
for the world and the second thing that
you need to do is teach what you know to
others maybe start a YouTube channel
maybe start a blog post do whatever you
want to do but start teaching others and
you will find that you will learn even
more things when you teach others and my
hope is that people watching this video
right now will someday guide other
people to reach Mastery in something and
this is the type of community that I
want to build and speaking of community
we now have a Discord server which you
can join and that's going to be where I
can chat with you guys and if you had
any questions you can ask there so
that's going to be it for this video
guys I really hope you enjoyed this
video leave a comment down below and let
me know what you think of this roadmap
and uh definitely share your knowledge
with others if you have any experience
in this field and now you can watch five
of my videos that YouTube is
recommending if you want to so take care
of yourself and I will see you in the
next videos
Посмотреть больше похожих видео
5.0 / 5 (0 votes)