JavaScript Tutorial with Three.js – 5 Projects for Beginners

Learn fundamental JavaScript and Three.js with 5 stand-alone projects. ✏️ Course developed by @robotbobby9 0) Three.js Roadmap A roadmap to help you get started. Starting code: https://github.com/bobbyroe/getting-started-threejs/tree/start 1) Textures in Three.js Everything you need to know about applying textures to your 3D models Free Textures: https://polyhaven.com/textures 2) Create A 3D Globe Create a lovely globe with country outlines floating in the stars. 3D Globe code: https://github.com/bobbyroe/3d-globe-with-threejs 3) Simple Particle Effects Quick, easy-to-create effects like Fire, Smoke and Sparkles. Particle Effects: https://github.com/bobbyroe/Simple-Particle-Effects 4) Scroll Animation Smooth animation triggered by scrolling. Scroll Animation: https://github.com/bobbyroe/scroll-animation 5) Physics Variations Interactive physics project with Three.js and Rapier Physics. Physics: https://github.com/bobbyroe/physics-with-rapier-and-three Since each project is stand-alone, feel free to skip around! 🔗 Learn Three.js Basics Course: https://robotbobby.thinkific.com/courses/learn-threejs-basics ⭐️ Contents ⭐️ Course Introduction - 0:00 Welcome & Course Overview - 0:20 Projects You'll Build - 0:51 Meet Your Instructor: Bobby Row - 1:03 The 5 Standalone Projects - 1:34 Skipping Around the Course Project 0: 3JS Road Map - 1:39 Getting Started with 3JS - 2:23 Understanding the 3JS Toolbox - 2:54 The Core 3JS Components (Scene, Camera, Renderer) - 3:10 Geometries, Materials & Meshes - 4:13 The Importance of Lighting - 4:30 Simple Animations - 4:57 The Beginner's Road Map - 5:12 The Intermediate Road Map - 6:21 The Advanced Road Map - 6:45 Where to Find Help & Inspiration - 7:08 Learn by Experimenting Project 1: Textures - 7:26 An Introduction to Textures - 7:50 Applying a Simple Texture - 8:48 Handling Texture Aspect Ratios - 10:50 Normal & Roughness Maps - 12:20 Materials & Lighting - 14:40 Understanding Normal Maps - 15:11 Roughness Maps & Shininess - 16:45 Experimenting with Different Textures Project 2: 3D Globe - 17:35 Building the 3D Globe - 18:50 Setting Up the Sphere - 21:56 Adding Stars to the Scene - 22:54 Drawing Country Outlines - 28:17 Using Fog for Depth - 31:56 Adding Random Colors Project 3: Particle Effects - 34:50 Creating Particles - 35:43 Building a Smoke Effect - 37:12 Tweaking Particle Properties - 39:38 Creating a Fire Effect - 41:46 The Sparkly Dot Effect - 45:50 The Role of Rotation Project 4: Scroll Animation - 46:20 Scroll-Triggered Animations - 46:55 Setting up HTML & CSS - 48:25 Linking 3JS to the DOM - 49:03 Responding to Scroll Events - 50:42 Loading the Astronaut Model - 53:48 Applying a Matcap Material - 54:38 Linking Rotation to Scroll - 55:29 Adding a Starfield - 57:49 Smoothing the Animation Project 5: Physics - 1:00:46 An Introduction to Physics with Rapier - 1:02:00 Initial Scene Setup - 1:05:27 Adding HDR Environment Lighting - 1:07:49 Creating Metallic & Reflective Objects - 1:09:08 Incorporating Different Geometries - 1:10:45 Adding Rotational Physics - 1:11:31 Visualizing Colliders - 1:12:47 Using convexHull for Custom Colliders - 1:17:31 Improving Mouse Interactivity - 1:21:20 Integrating a GLTF Model - 1:22:55 Adding a Color Palette ❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp 🎉 Thanks to our Champion and Sponsor supporters: 👾 Drake Milly 👾 Ulises Moralez 👾 Goddard Tan 👾 David MG 👾 Matthew Springman 👾 Claudio 👾 Oscar R. 👾 jedi-or-sith 👾 Nattira Maneerat 👾 Justin Hual -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news