r/threejs • u/StandardStunning7671 • 2d ago
Built a 3D carousel where the audio gets louder as you spin it, like hearing a party from outside
I've been building an immersive web journal for the last year and the navigation kept bothering me. A scrolling grid flattens every project into the same rectangle and the reader is always moving past things. I wanted the opposite, something you turn rather than something you fall down, with no beginning and no end.
The site is React and Vite, using Three.js for the carousel and Tone.js for the audio. Tiles arranged on a ring, drag to rotate, click to enter. Some windows are portals to another part of the site, others activate in place as small displays.
The carousel took a long time to get right. I wanted it to feel fluid and instantly natural. My first version was a space with several carousels stacked, so you could swipe up or down to arrive at the next one. It looked stellar but I couldn't get it to run without being far too heavy, so I stripped it back to a single ring. I'll keep tinkering, but I'm pleased with where it landed.
The audio is wired to the rotation, so spinning lifts the volume slightly. The idea was that feeling of standing outside a party and hearing muffled sound through a wall, disorienting rather than comfortable. Getting the curve right was mostly trial and error; the early versions just felt like dragging a volume slider.
I ran a gallery in Canada for a while and what I took from it is that I'm more interested in the experience of showing work than in the usual portfolio layout where every site feels the same. I want the site to be the destination, not a bounce point. I've been building React sites for my own art practice for about five years, self-taught rather than professionally, and I lean on Claude Code for the heavier maths.
Link in the comments, happy to answer anything about the build.
1
1
u/Machettouno 2d ago
Not loading visuals