This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
Submission by dev username: member_01928ffe
What I Built
For this challenge, I decided to step away from traditional 2D layouts and build something that felt truly immersive and personal: a fully interactive 3D digital desk space. My goal was to create more than just a webpage; I wanted to build an experience. This virtual office isn't just a static image—it's a dynamic environment where every object tells a story and serves a purpose.
The scene starts with a "hero" view of a complete desk setup. From there, the user can scroll down to navigate through a series of full-screen drawers, each dedicated to a different project. But the interaction doesn't stop there. Almost every item on the desk is clickable, opening up detailed pop-up modals:
- The Monitor: Brings up a modal with a snippet of code.
- Sticky Notes: Each note opens a unique, interactive to-do list.
- The Calendar: Reveals a fully functional, navigable calendar widget.
- Mail: Opens a ready-to-use email editor.
- Name Card: Displays a weekly timesheet and a sign-out option.
- The Camera: Shows a gallery of photos with captions.
This project was an ambitious attempt to blend the lines between a user interface and a tangible, explorable space.
Demo
You can experience the live version of the project.
Below is an embedded version of the interactive desk scene. Click on the objects, scroll down to explore the drawers, and see what you can discover!
See the Pen
Interactive 3D Office Desk in Three.js by Rome (@Rome-1)
on CodePen.
Journey
This project was a deeply meaningful journey for me. For a while, I'd been looking for a challenge that would not only let me flex my existing web design and frontend skills but also push me into new, unfamiliar territory. This hackathon was the perfect opportunity.
I started with a simple photo of a desk and a question: "What if this was real?" That question led me down the rabbit hole of WebGL and, specifically, Three.js. The learning curve was steep. Moving from the predictable world of CSS layouts to the boundless 3D space of a element was both daunting and exhilarating. I spent so many hours learning about scenes, cameras, lighting, materials, and raycasting for interactivity.
One of the choices I'm most proud of is the scrolling navigation. Instead of simple anchor links, I wanted the transition from the main desk to the project drawers to feel like a seamless, cinematic camera movement. Implementing this required custom logic to control the camera's position with the mouse wheel, creating a unique, webpage-like feel within a 3D environment.
Every interactive pop-up was its own mini-project. Building the dynamic calendar, the to-do lists where you can check off items, and ensuring that all modals felt polished and prevented background interactions was a fantastic exercise in detail-oriented development.
This hackathon has been more than just a coding challenge; it's been a reaffirmation of my passion for creating engaging and beautiful user experiences. It has reignited my confidence in my design sensibilities and given me a powerful new tool in Three.js to bring even more ambitious ideas to life. I walk away from this not just with a project I'm incredibly proud of, but with a renewed sense of what's possible on the web.
Top comments (2)
This is really good!
Thanks so much!