Course-2-Advanced-Geometry-Materials

Course 2: Advanced Geometry & Materials

📋 Overview

Welcome to Course 2! Now that you understand the core concepts, we'll explore advanced geometry creation, loading 3D models, textures, and advanced materials including PBR and shaders.

Duration: 3-4 weeks
Focus: Complex geometries, custom materials, textures, 3D models

🎯 Learning Objectives

By the end of this course, you will be able to:

• ✅ Create custom geometries
• ✅ Load and display 3D models (GLTF, FBX, OBJ)
• ✅ Apply textures and texture maps
• ✅ Work with PBR materials
• ✅ Create custom shader materials
• ✅ Set up environment maps and HDRI
• ✅ Optimize 3D models and textures

📚 Topics Covered

1. Custom Geometries

Create your own 3D shapes:

• BufferGeometry
• Vertices and faces
• Custom geometry in R3F
• Procedural generation

2. Loading 3D Models

Import external 3D models:

• GLTF format (recommended)
• useGLTF hook
• Model optimization
• Model manipulation

3. Textures

Apply images to 3D objects:

• useTexture hook
• Texture mapping
• UV coordinates
• Texture types (diffuse, normal, roughness, etc.)

4. PBR Materials

Physically Based Rendering:

• Material properties
• Metalness and roughness
• Normal maps
• Ambient occlusion

5. Custom Shaders

Create custom shader materials:

• GLSL shaders
• Vertex shaders
• Fragment shaders
• ShaderMaterial

6. Environment Maps

Set up realistic reflections:

• HDRI images
• Environment component
• Reflections and refractions
• IBL (Image-Based Lighting)

🛠️ Examples

Example 1: Custom Geometry

Location: examples/example-1-custom-geometry/

Create custom 3D shapes programmatically:

• BufferGeometry
• Custom vertices
• Procedural shapes

Example 2: Load Models

Location: examples/example-2-load-models/

Load and display 3D models:

• useGLTF hook
• Model positioning
• Model manipulation

Example 3: Textures

Location: examples/example-3-textures/

Apply textures to objects:

• useTexture hook
• Texture mapping
• Multiple texture types

Example 4: PBR Materials

Location: examples/example-4-pbr-materials/

Advanced physically-based materials:

• Metalness and roughness
• Normal maps
• Material properties

Example 5: Shaders

Location: examples/example-5-shaders/

Custom shader materials:

• GLSL shaders
• Vertex and fragment shaders
• Custom effects

Example 6: Environment

Location: examples/example-6-environment/

Environment maps and HDRI:

• Environment component
• HDRI setup
• Reflections

🎨 Projects

Project 1: 3D Model Viewer

Location: project/3d-model-viewer/

Complete model viewer with:

• Load multiple models
• Camera controls
• Model information
• Professional presentation

Project 2: Material Showcase

Location: project/material-showcase/

Interactive material library:

• Various materials
• Texture combinations
• Real-time adjustments
• Material comparison

📝 Learning Checklist

• Create custom geometries
• Load 3D models
• Apply textures
• Use PBR materials
• Create custom shaders
• Set up environment maps
• Complete 3D Model Viewer
• Complete Material Showcase

🚀 Quick Start

1. Navigate to any example:

   cd examples/example-1-custom-geometry

2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

📖 Prerequisites

Before starting, make sure you've completed:

• Course 0: Foundation & Setup
• Course 1: Core Concepts

🎓 Next Steps

After completing this course:

• Course 3: Lighting & Post-Processing - Advanced lighting, shadows, post-processing effects

📚 Resources

• React Three Fiber Docs
• Three.js Docs
• React Three Drei
• GLTF Format

---

Ready to start? Begin with Example 1: Custom Geometry!

Last updated: January 2025