aaf-systems-homepage/app/README.md

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:

   npm install
   

2. Start the development server:

   npm run dev
   

3. Open your browser to http://localhost:5173

Build for Production

npm run build

Preview Production Build

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:

   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