Three.js Scene Setup

When to Use

Use this skill when:

• Starting a new Three.js project
• Setting up a new scene in an existing project
• Refactoring scene initialization code
• Ensuring proper resource management and cleanup

Core Principles

1. Proper Initialization Order: Renderer → Scene → Camera → Lights → Objects
2. Resource Management: Track and dispose of geometries, materials, and textures
3. Responsive Design: Handle window resize events
4. Performance: Use efficient rendering settings
5. Type Safety: Leverage TypeScript for all Three.js objects

Implementation Steps