Subdrum is a single-page web experiment that renders a wooden cajon drum in 3D and lets visitors rotate it, zoom in, pan around, and tap to play. I built it as a companion piece for a musician's Bandcamp release, hoping to turn a real instrument into something you can hold and strike on screen. The whole thing is one self-contained HTML page with no build step.
How it works
The drum is a textured box rendered with Three.js, lit by a small rig of ambient and directional lights and wrapped in photographic wood textures for each face. OrbitControls handle drag-to-rotate, pinch-to-zoom, and two-finger pan, with a gentle auto-rotation that stops the moment you touch it. Tapping the drum raycasts against the mesh and triggers a cajon hit synthesized live with the Web Audio API: a pitch-swept sine thump, a triangle resonance, and a short burst of low-passed noise for the attack, each with a little random variation so no two hits sound quite the same.
// A look
The cajon's front face, the model the 3D drum is built from.Natural birch side with the round sound hole.Close detail: rubber foot and birch ply edge banding.
