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.