An interactive 3D visualization of a professional audio effect pedal, inspired by high-end studio equipment like the Elektron Analog Heat. Built with Three.js and modern web technologies.
- Realistic 3D modeling of a professional effect pedal
- Interactive OLED display with glowing yellow text
- Neve-style aluminum knobs with precise animations
- Studio-quality LED indicators with realistic glow effects
- Professional studio environment with wooden flooring and ambient lighting
- Physically-based materials and realistic shadows
- Responsive design that works on all devices
- Orbit controls for full 360° viewing
- Three.js for 3D rendering
- Vite for fast development and building
- GSAP for smooth animations
- Modern JavaScript (ES6+)
- Clone the repository:
git clone https://github.com/mash021/3djs.git
cd 3djs- Install dependencies:
npm install- Run the development server:
npm run dev- Open your browser and navigate to:
http://localhost:5173
To create a production build:
npm run buildThe built files will be in the dist directory.
- Left click + drag: Rotate camera
- Right click + drag: Pan camera
- Scroll: Zoom in/out
- The knobs rotate automatically to demonstrate the effect
3d-studio-portfolio/
├── src/
│ ├── main.js # Main application code
│ ├── style.css # Global styles
│ └── index.html # HTML template
├── public/ # Static assets
├── package.json # Project dependencies
└── README.md # This file
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by professional studio equipment like Elektron Analog Heat and Rupert Neve Designs
- Thanks to the Three.js community for their excellent documentation and examples