# AAF Systems Homepage A modern, interactive homepage built with Vite, TypeScript, and Three.js featuring a physics-based 3D scene. ## Features - **Interactive 3D Scene**: Physics simulation with objects attracted to a central point - **Mouse Interaction**: Cursor creates repulsion forces that push objects away - **Studio Lighting**: Professional lighting setup for visual appeal - **Modern Design**: Clean typography with "AAF Systems" branding - **Responsive**: Optimized for different screen sizes - **Performance**: Smooth 60fps animation with optimized Three.js rendering ## Technical Stack - **Build Tool**: Vite - **Language**: TypeScript - **3D Graphics**: Three.js - **Physics**: Cannon.js (cannon-es) - **Styling**: Modern CSS with Inter font ## Development ### Prerequisites - Node.js (v16 or higher) - npm or yarn ### Getting Started 1. Install dependencies: ```bash npm install ``` 2. Start the development server: ```bash npm run dev ``` 3. Open your browser to `http://localhost:5173` ### Build for Production ```bash npm run build ``` ### Preview Production Build ```bash npm run preview ``` ## Customization ### Adding 3D Models To use custom GLTF models instead of the placeholder objects: 1. Place your `model.glb` file in the `public/models/` directory 2. Uncomment the model loading line in `src/main.ts`: ```typescript app.loadModel('/models/model.glb') ``` ### Adjusting Physics You can modify the physics behavior in the `updatePhysics` method: - **Attraction Strength**: Modify the `strength` calculation - **Repulsion Force**: Adjust the `repulsionStrength` calculation - **Damping**: Change the velocity scaling factor (default: 0.99) ### Lighting Setup The studio lighting can be customized in the `setupLighting` method: - **Key Light**: Main directional light - **Fill Light**: Secondary softer light - **Rim Light**: Edge definition light - **Point Lights**: Atmospheric lighting ## Browser Support - Chrome 88+ - Firefox 78+ - Safari 14+ - Edge 88+ ## License MIT License