Post Content
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 Read More freeCodeCamp.org
#programming #freecodecamp #learn #learncode #learncoding
![How to use AI as an accelerator, not a crutch, with freelance engineer Ankur Tyagi [Podcast #186]](https://i2.ytimg.com/vi/ebarbEsoHzg/hqdefault.jpg)
