Author: freeCodeCamp.org - Bewertung: 167x - Views:1123
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