https://github.com/leereilly/copilot-cam
A 3D model viewer that brings GitHub Copilot to life with interactive webcam reflections and video textures. A vibe coding experiment with GitHub Copilot (quite literally) :copilot: :video_camera:
https://github.com/leereilly/copilot-cam
fortheloveofcode three-js threejs vibe-coding webcam
Last synced: 4 months ago
JSON representation
A 3D model viewer that brings GitHub Copilot to life with interactive webcam reflections and video textures. A vibe coding experiment with GitHub Copilot (quite literally) :copilot: :video_camera:
- Host: GitHub
- URL: https://github.com/leereilly/copilot-cam
- Owner: leereilly
- License: other
- Created: 2025-07-17T21:57:58.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-07-18T00:33:47.000Z (4 months ago)
- Last Synced: 2025-07-18T02:59:04.335Z (4 months ago)
- Topics: fortheloveofcode, three-js, threejs, vibe-coding, webcam
- Language: HTML
- Homepage: http://leereilly.net/copilot-cam
- Size: 1.41 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Copilot Cam
A 3D model viewer that brings GitHub Copilot to life with interactive webcam reflections and video textures.
This is vibe coding experiment with GitHub Copilot, Claude Sonnet 4.0, and lots of caffeine and Red Bull.
Built for GitHub's [For the Love of Code](https://gh.io/ftloc) hackathon.
## Features
- **Interactive 3D Model**: View and rotate a detailed 3D model of GitHub Copilot
- **Webcam Integration**: Your webcam feed is applied as texture to the left lens
- **Video Playback**: MP4 video plays on the right lens
- **Synthwave Eyes**: Animated glowing eyes with pulsing colors
- **Reflection Mode**: Webcam provides environmental reflections on metallic surfaces
- **Responsive Design**: Works across different screen sizes and devices
## How It Works
The application uses Three.js to render a 3D scene with:
- GLB model loading for the Copilot 3D model
- Real-time webcam capture and texture mapping
- Video texture application to specific mesh components
- Dynamic lighting and material effects
- Orbital camera controls for interactive viewing
## Technical Details
- **Framework**: Three.js for 3D rendering
- **Model Format**: GLB (binary glTF)
- **Video Input**: WebRTC getUserMedia API for webcam access
- **Rendering**: WebGL with shadow mapping and tone mapping
- **Materials**: PBR (Physically Based Rendering) materials with custom shaders
## Usage
1. Open `index.html` in a modern web browser
2. Allow webcam access when prompted
3. Use mouse to rotate the model, scroll to zoom
4. Your webcam feed will appear on the left lens
5. Watch the synthwave-style animated eyes glow
## Browser Compatibility
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+
**Note**: Requires HTTPS or localhost for webcam access in most browsers.
## Files
- `index.html` - Main application with 3D viewer
- `share-modal.js` - Share functionality (Web Share API)
- `copilot.glb` - 3D model file
- `vid.mp4` - Video asset for right lens
- `LICENSE` - MIT license
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
**Note**: The MIT License applies to all files in this repository except for the `copilot.glb` 3D model file, which is used without explicit permission and is not covered by this license.