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

Summary

This 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

00:00

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

05:00

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

Keywords

💡3GS

3GS, presumably a shorthand for 'Three.js', is a JavaScript library that creates 3D graphics in a web browser using WebGL. It is central to the video's theme, as the script discusses a roadmap for learning 3D graphics and specifically mentions using 3GS for rendering within an HTML DOM. The video suggests learning 3GS after gaining foundational knowledge in 3D graphics.

💡Beginners

The term 'beginners' refers to individuals who are new to a particular field or skill, in this case, 3D graphics and 3GS. The video script addresses common mistakes made by beginners, emphasizing the importance of understanding the basics before diving into complex topics like 3GS.

💡Roadmap

A 'roadmap' in the context of the video is a structured guide or plan designed to help learners progress from novice to advanced levels in a particular skill set. The video presents a roadmap for learning 3GS, detailing the stages and skills one should acquire to become proficient.

💡JavaScript

JavaScript is a programming language that is essential for web development and is the foundation for coding in 3GS. The script mentions that knowing how to code with JavaScript is the starting point of level one in the 3GS learning roadmap.

💡Blender

Blender is a 3D modeling and rendering software that teaches users the basics of 3D graphics, such as lighting and geometry creation. The video suggests learning Blender as a starting point to understand 3D scene composition before moving on to 3GS.

💡Rendering API

A 'rendering API' is an application programming interface that allows for the rendering of graphics. In the script, 3DS (likely a typographical error for 'Three.js') is described as a rendering API rather than a game engine, highlighting its purpose for rendering 3D graphics on a web canvas.

💡React Three Fiber

React Three Fiber is a React renderer for Three.js that allows for the integration of 3D content with React applications. The video mentions it as a potential starting point for those familiar with React, providing an abstraction level suitable for beginners in 3GS.

💡Three.js Journey

Three.js Journey refers to a course by Bruno Simon that is recommended in the video for learning 3GS. It is described as a comprehensive resource for beginners to get started with 3GS, offering both paid and free learning paths.

💡Shaders

Shaders are programs used in 3D graphics to perform rendering calculations on graphics hardware. The video emphasizes the importance of shader skills in creating visually appealing 3D scenes with 3GS, mentioning a future course on the topic.

💡Portfolio

A 'portfolio' in the context of the video refers to a collection of work that showcases an individual's skills and experience in 3D graphics and 3GS. The script discusses the importance of creating a unique portfolio to secure a job in the industry.

💡Discord Server

A 'Discord server' is a chat community platform where individuals can discuss and share information. The video mentions a Discord server as a place for the community to interact, ask questions, and share knowledge about 3GS and 3D graphics.

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