Building an Interactive 3D Portfolio with Three.js, Next.js, and GSAP

Most portfolios introduce their creator through a page. I wanted mine to introduce me through a space.

Night Workspace is my portfolio inside an interactive, warm-lit studio. Visitors explore objects around the room to discover my projects, skills, and background.

👉 Explore the workspace

Turning a room into navigation

The idea was to give familiar objects a purpose:

• Books on the shelf represent projects and open into reading spreads.
• The monitor introduces me and my work.
• The softboard holds my skills, education, and experience.
• A music player and digital clock add atmosphere to the space.

Selecting an object moves the camera closer to it. The challenge is making that interaction understandable without requiring visitors to learn a new interface.

The stack

The project uses:

• Three.js for the 3D scene, objects, materials, and rendering.
• React and Next.js for the application and surrounding interface.
• GSAP for animation and transitions.
• Canvas textures for printed content on objects such as book pages and board notes.

Challenge 1: text inside a 3D scene

Text that looks good on a large texture can become difficult to read once it is mapped onto an object, viewed at an angle, and rendered on a small screen.

This became particularly noticeable on mobile.

I worked on several parts together:

• Increasing the size and contrast of printed text.
• Moving the camera closer for reading.
• Increasing texture resolution for visible book pages.
• Reducing the effect of scene lighting on mobile board text.

The main lesson: texture resolution alone does not solve readability. Camera framing, contrast, and the amount of text on each surface matter too.

Challenge 2: mobile performance

A scene that runs comfortably on a desktop can struggle on a phone.

I introduced a lighter mobile rendering profile, including reduced rendering resolution during movement, smaller shadow maps, and fewer expensive visual effects.

For reading views, the scene can increase resolution once movement settles. Visible book pages receive sharper textures without keeping every page at the highest resolution.

I also reduced unnecessary updates when objects are idle.

This is still an area I’m refining, so feedback from different devices would be useful.

Challenge 3: keeping the portfolio easy to use

The room is an experiment in presentation, but visitors still need to understand what I do and find relevant work quickly.

I’m also developing ordinary text pages for project details, skills, and contact information. The interactive experience and readable content should support each other.

What I learned

Building this has made me think about a portfolio as both a graphics project and an interface.

An object can look convincing but be difficult to interact with. A camera transition can feel smooth but take too long. A page can look sharp on a laptop and become unreadable on a phone.

The useful work has been finding those gaps and improving them.

I’d appreciate your feedback

If you try the workspace, I’d love to know:

1. Was it clear which objects you could interact with?
2. How did it perform on your device?
3. Were the book pages and board notes readable?
4. Did the room help you explore, or make anything harder to find?

If you report a performance issue, please include your device and browser.

Visit Night Workspace →

Thanks for taking a look!

— Ayush Kumar Yadav