README.md

Three.js Journey

All the classes I've done on Three.JS Journey, but with Astro (and Threlte!)

Completed lessons

01 - Basics

• 03 - Basic scene
• 04 - Transform objects
• 05 - Animations
• 06 - Cameras
• 07 - Fullscreen and resizing
• 08 - Geometries
• 09 - Debug ui
• 10 - Textures
• 11 - Materials
• 12 - 3d text

02 - Classic techniques

• 14 - Lights
• 15 - Shadows
• 16 - Haunted house
• 17 - Particles
• 18 - Galaxy generator
• 19 - Scroll based animation

03 - Advanced techniques

• 20 - Physics
• 21 - Imported models
• 22 - Raycaster and mouse events
• 23 - Custom models with blender
• 24 - Environment map

04 - Shaders

• 27 - Shaders
• 28 - Shader patterns
• 29 - Raging sea
• 30 - Animated galaxy
• 31 - Modified materials
• 32 - Coffee smoke
• 32 - Coffee smoke shader
• 33 - Hologram
• 34 - Fireworks
• 35 - Lighting shading
• 36 - Raging sea shading
• 37 - Halftone
• 38 - Earth
• 39 - Particles cursor
• 40 - Particles morphing
• 41 - Gpgpu flow field particles
• 42 - Wobbly sphere
• 43 - Sliced model
• 44 - Procedural terrain

05 - Extra

• 45 - Post processing
• 46 - Performance tips
• 47 - Intro and loading progress
• 48 - Mixing html and webgl

06 - Portal scene

• 51 - Importing and optimizing the scene
• 52 - Adding details to the scene

07 - Threlte

• 55 - First threlte application
• 57 - Debug threlte application
• 59 - Load models with threlte
• 60 - 3d text
• 61 - Portal scene
• 62 - Mouse events
• 63 - Postprocessing
• 64 - Fun and simple portfolio
• 65 - Physics
• 66 - Create a game

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm run dev	Starts local dev server at localhost:4321
pnpm run build	Build your production site to ./dist/
pnpm run preview	Preview your build locally, before deploying
pnpm run astro ...	Run CLI commands like astro add, astro check
pnpm run astro -- --help	Get help using the Astro CLI