Three.js 101 Crash Course: Beginner’s Guide to 3D Web Design (7 HOURS!)

Video Description

Dive into the world of 3D web development with our comprehensive 7-hour Three.js crash course. Taught by industry expert Jesse Zhou, this course will guide you from the basics to advanced techniques, empowering you to create breathtaking 3D experiences on the web. Once you complete this crash course, keep learning by taking Jesse's complete Three.js Bootcamp Course. Whether you aim to become a Web Developer, Game Developer, VR Developer, or 3D Artist, this course can help you stand out and give you a key skill to achieving your career goals. 🎨 Full Three.js Bootcamp Course: https://zerotomastery.io/courses/learn-three-js/ 🤑 Use code: YTTHREE10 to get 10% OFF (for life!) ========= 💻 Free HTML & CSS Crash Course For Beginners: https://youtu.be/0kS3M8a6kP8 🕕 Three.js Explained in 2 Minutes: https://youtu.be/ZHZh6S9b6DY?si=9IRf1d8OuDLds3Eo ========= 📚 Course Guide: https://robust-samba-34f.notion.site/Three-js-Bootcamp-Handbook-60ab898ec8684ce1b45d916fdd82e4c5 👨‍💻 Github Repository: https://github.com/enderh3art/ztm-threejs-bootcamp 👍 Subscribe for more free tutorials and exclusive content: https://links.zerotomastery.io/youtube ========= ⏰ Timestamps: 00:00 Introduction 02:13 Three.js Examples 07:29 Wait...What is Three.js? 16:25 Prerequisite Knowledge 19:54 Three.js Documentation 22:58 Hacking the Example 28:54 Three.js Fundamentals 36:57 Installing Vite 42:30 Three.js Setup 48:46 Scene 54:30 Camera 59:49 Renderer 1:04:47 Starter Pack 1:09:56 FOV 1:14:01 Near and Far 1:20:03 Orbit Controls 1:25:02 Renderloop 1:32:53 Orthographic Camera 1:39:05 Other Controls 1:42:07 Resizing 1:53:36 Antialiasing - The Problem 1:56:00 Antialiasing - The Solution 1:59:37 Antialiasing - The Solution Implementation 2:03:37 Starter Pack 2:04:42 Transforming Position 2:12:03 Vector 3 2:19:56 Transforming Scale 2:22:35 Scene Hierarchy 2:29:08 Rotation - Part 1 2:31:10 Rotation - Part 2 2:45:53 Animating Meshes - Part 1 2:48:04 Animating Meshes - Part 2 2:52:35 Other Animations 2:58:12 Introduction 3:02:55 Buffer Geometry 3:15:43 Primitives 3:22:57 Materials vs. Textures 3:26:57 Material Types 3:31:29 Mesh Basic Material 3:47:05 Mesh Lambert and Mesh Phong Materials 3:57:25 Mesh Standard and Mesh Physical Materials 4:07:16 Setup 4:18:25 Loading a Texture 4:25:32 Repeating Texture 4:36:06 Texture Offset 4:40:03 UV Maps - Part 1 4:45:13 UV Mapping - Part 2 4:50:31 PBR Maps 5:00:03 Normal Map 5:04:36 Height Map 5:07:36 AO Map 5:15:21 Putting it All Together! 5:19:34 Introduction 5:20:42 Planning Our Project 5:23:45 Adding Meshes 5:31:55 Planetary Orbit 5:44:42 Planet Array 5:49:48 Adding Materials 5:53:51 Automating Mesh Generation 6:07:21 Animating the Planet Array 6:20:01 Final Touches! 6:30:34 Final Words ========= 💥 Who is this Three.js course for? https://zerotomastery.io/courses/learn-three-js/ ◾ JavaScript Developers who want to take their skills to the next level by building immersive, interactive 3D browser experiences ◾ Anyone who wants to gain a complete and practical understanding of the Three.js JavaScript library ◾ You want a step-by-step guide to learn how to code using Three.js and get hired as a Three.js Developer ◾ Developers that want to dive into the world of 3D design ◾ Students who are frustrated with their current progress with all of the beginner Three.js tutorials out there that don't go beyond the basics and don't give you real-world practice or skills you need to actually get hired ◾ You want to learn Three.js from someone with real-world experience ========= Graduates of Zero To Mastery are now working at Google, Tesla, NVIDIA, Amazon, Apple, IBM, JP Morgan, Meta, NASA, Shopify + other top companies. Many are also working as top-rated Freelancers getting paid $1,000s while working remotely around the world. 🎓 Here are just a few of them: https://zerotomastery.io/testimonials This can be you. ========= Become a Top 10% 3D Developer 👉 https://zerotomastery.io/courses/learn-three-js/ #zerotomastery #threejs