Galaxy Portfolio - An interactive zoom journey from Milky Way to desk

Showcase
1

I wanted to share my latest project - an interactive 3D portfolio that lets users zoom from our Milky Way galaxy all the way down to my workspace:

Concept

I just wanted to create a memorable alternative to standard portfolio website. It works like Google Earth but extends the concept from space to my desk, where my actual HTML portfolio appears on a 3D monitor.

Implementation

The journey consists of 7 distinct scenes (galaxy → solar system → earth → continent → city → district → room), with smooth transitions handled by a custom scene manager:

  • Scene precompilation system that eliminates frame drops during transitions by pre-rendering to a 1×1 offscreen buffer
  • Device detection for different journey endpoints (monitor on desktop, phone on mobile)
  • HTML content rendered inside 3D models with working interactivity

The precompilation system was particularly important - it prevents the typical shader compilation stutter that happens during first scene transition. By rendering all scenes to offscreen buffers during loading, all shaders get compiled before they’re actually needed. This gives buttery-smooth transitions without frame drops.

Performance considerations

  • Models processed with gltfjsx for optimization
  • Texture compression for faster loading
  • 3D HTML integration with platform-specific handling

Open source

The entire project is available on GitHub if anyone wants to see how specific parts were implemented.

I’d love to hear your feedback.

4 Likes
2

This was actually super fun, reminds me of the Men in Black opening! You could also try the reverse, with the camera zooming out to your profile, like in Contact!

2 Likes
3

Lovely work! Did you reveal your absolute location zooming into that house? :sweat_smile:

2 Likes
4

Thank you! No, I hope the real residents of that house don’t sue me :smile:

2 Likes