Skip to content
Erfan Mirasadi's Three.js Portfolio with Theatre.js Choreography

Erfan Mirasadi's Three.js Portfolio with Theatre.js Choreography

A 3D interactive portfolio built with Three.js, Theatre.js, and Next.js that actually runs smoothly on mobile. Draco compression keeps geometry lean, code-splitting prevents bundle bloat, and touch controls work like they should.

Details

Published

What it is

Most 3D portfolio sites are desktop-only tech demos that turn your phone into a space heater. Erfan Mirasadi's portfolio actually runs smoothly on mobile, which already puts it in rare company. He's using Three.js for rendering, Theatre.js to choreograph camera movements and scene transitions, and Draco compression to keep geometry sizes from ballooning. The whole thing lives in a Next.js app that doesn't front-load a massive bundle. It loads fast, runs smooth, and treats touch inputs like first-class citizens instead of consolation prizes.

The technical choices are worth noting. Theatre.js gives the animations proper timing and easing without locking you into a rigid on-rails experience. Next.js handles code-splitting so you're not downloading everything upfront. The Draco compression is doing real work keeping mobile frame rates respectable. Mirasadi clearly spent time profiling and optimizing rather than just shipping the first version that looked good on his laptop. It's the kind of polish that only shows up when someone actually tests on a mid-range phone with a spotty connection.

The source is on GitHub if you want to dig into how he structured the Next/Three integration or see the performance strategies in practice. Worth checking out, especially if you've been putting off making your own site work properly on phones.

How it’s made

Technology
DracoMobile
Technique
Performance
Domain
Portfolio