This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space
💼 What I Built
I created a fully interactive 3D office desk scene using HTML, CSS, JavaScript, and Three.js. The scene includes draggable camera controls, zoom functionality, clickable elements, and animated textures—designed to feel modern, minimal, and immersive right in the browser.
🔹 Features:
- Camera controls (rotate, zoom, pan)
- A clickable lamp that toggles light
- Animated laptop screen showing a typing effect
- Clean and modular design, including a customizable keyboard layout
🔗 Live Demo:
👉 https://codepen.io/Suvojit-Modak/pen/RNWrQjX
💡 Tech Stack:
- HTML
- CSS
- JavaScript
- Three.js
- WebGL
- OrbitControls
- Raycasting
🛠️ Journey
This project started with the goal of building something more immersive than a traditional 2D web layout. Using Three.js, I constructed a virtual office environment complete with a desk, laptop, lamp, and wall decor.
The keyboard was particularly fun to design—I used a data-driven approach that lets you change the layout by editing a single array. For added realism, I animated the laptop screen with a looping code-typing effect and added interactive lighting.
I gathered feedback and refined the design with a focus on balance and symmetry—especially in the keyboard layout. Each iteration brought more polish and better performance.
🚀 Takeaways
- Three.js is incredibly powerful for creating interactive scenes on the web
- Interactivity (like toggles and animations) brings static 3D objects to life
- Modular code pays off when making updates or adding features
🏷️ Tags
#threejs, #creativecoding, #webgl, #frontendchallenge, #javascript, #css, #html, #3dweb, #interactiveui, #webdevelopment
🙏 Thank You
Thanks to the Dev community and challenge organizers for the opportunity to explore creative coding with a real-world theme. It was a great learning experience, and I’m excited to keep building even more interactive 3D experiences on the web! 🚀
Top comments (0)