94 lines
2.0 KiB
Markdown
94 lines
2.0 KiB
Markdown
# 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
|