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 hackathon.
- 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
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
- 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
- Open
index.html
in a modern web browser - Allow webcam access when prompted
- Use mouse to rotate the model, scroll to zoom
- Your webcam feed will appear on the left lens
- Watch the synthwave-style animated eyes glow
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+
Note: Requires HTTPS or localhost for webcam access in most browsers.
index.html
- Main application with 3D viewershare-modal.js
- Share functionality (Web Share API)copilot.glb
- 3D model filevid.mp4
- Video asset for right lensLICENSE
- MIT license
This project is licensed under the MIT License - see the 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.