aaf-systems-homepage/app/src

AAF Systems Homepage - Code Structure

Overview

The main.ts file has been refactored into a modular structure for better maintainability and organization.

File Structure

src/main.ts (133 lines → from 678 lines)

Main application class and initialization

• AAFHomepage class - Main application orchestrator
• Scene, camera, and renderer setup
• Animation loop coordination
• Application initialization

src/types.ts (11 lines)

Type definitions and interfaces

• PhysicsObject interface - Defines mesh and physics body pairing
• ModelGeometry interface - Defines extracted model geometry data structure

src/lighting.ts (42 lines)

Lighting management

• LightingManager class with static methods
• Studio lighting setup with multiple light types:
  • Ambient light for general illumination
  • Directional lights (key, fill, rim)
  • Point lights for atmosphere

src/model-loader.ts (311 lines)

3D model loading and processing

• ModelLoader class - Handles GLTF model operations
• Geometry extraction and processing
• Geometry downsampling for performance optimization
• Collision shape generation for physics
• Fallback object creation when model loading fails
• Model instancing with physics bodies

src/physics.ts (98 lines)

Physics simulation management

• PhysicsManager class with static methods
• Physics world configuration and setup
• Force application (attraction, repulsion, damping)
• Physics stepping and object synchronization
• Mouse interaction physics

src/event-manager.ts (40 lines)

Event handling and user input

• EventManager class - Manages user interactions
• Mouse movement tracking and world position calculation
• Window resize handling
• Raycasting for mouse interaction

Benefits of This Structure

🔧 Maintainability

• Each file has a single responsibility
• Easier to locate and modify specific functionality
• Reduced file size makes navigation simpler

🔄 Reusability

• Modules can be easily reused in other projects
• Static utility classes provide clean interfaces
• Type definitions are centralized and shared

🧪 Testability

• Individual modules can be unit tested in isolation
• Dependencies are clearly defined through imports
• Mock objects can be easily substituted

👥 Team Collaboration

• Multiple developers can work on different aspects simultaneously
• Clear separation of concerns reduces merge conflicts
• Code reviews are more focused and manageable

📦 Performance

• Tree-shaking can remove unused code more effectively
• Smaller bundles through modular imports
• Better browser caching of individual modules

Usage

The refactored code maintains the same external API. Simply import and use:

import app from './main'
// The application initializes automatically

Module Dependencies

main.ts
├── types.ts
├── lighting.ts
├── model-loader.ts (depends on types.ts)
├── physics.ts
└── event-manager.ts

All modules are designed to be stateless utilities or encapsulated classes, promoting clean architecture principles.