Role
Creative Developer | AutoVRse
Platform
Web-based 3D Virtual Experience
Timeline
3 months (Sep 2024 - Dec 2024)
Godrej LAFS - Kitchen Products
Web-based 3D Virtual Experience | React Three Fiber + WebGL | Live Project
The Kitchen module is part of Godrej’s interactive virtual showroom, a real-time 3D experience where users explore products inside a digital environment.
Unlike other tabs (locks, handles, etc.), the Kitchen required a deeper interaction model. Instead of flat hotspots, the goal was to create guided interaction zones, where clicking a section shifts the camera and reveals more detailed interactions inside that space.
Over 3 months, I transformed the Kitchen section from a static 3D scene into a structured, interactive system, rebuilding the codebase, introducing layered hotspots, and implementing guided camera and animation logic from scratch.
The Kitchen module is part of Godrej’s interactive virtual showroom, a real-time 3D experience where users explore products inside a digital environment.
Unlike other tabs (locks, handles, etc.), the Kitchen required a deeper interaction model. Instead of flat hotspots, the goal was to create guided interaction zones, where clicking a section shifts the camera and reveals more detailed interactions inside that space.
Over 3 months, I transformed the Kitchen section from a static 3D scene into a structured, interactive system, rebuilding the codebase, introducing layered hotspots, and implementing guided camera and animation logic from scratch.
Only process screens are shown here for NDA purposes. You can explore the live experience here: Godrej LAFS
Discovery Phase
The existing codebase was tightly coupled and messy. It did not support nested hotspot groups or controlled camera transitions. Adding this directly was actively breaking other scenes. So before building anything new, the foundation had to be fixed.
The existing codebase was tightly coupled and messy. It did not support nested hotspot groups or controlled camera transitions. Adding this directly was actively breaking other scenes. So before building anything new, the foundation had to be fixed.
"The other scenes in the experience follow a simple structure, visible hotspots inside a static camera frame. For the kitchen, we want a guided experience. Users should be able to move the camera to different angles of the kitchen to browse our catalogue of drawers and cabinets.
"The other scenes in the experience follow a simple structure, visible hotspots inside a static camera frame. For the kitchen, we want a guided experience. Users should be able to move the camera to different angles of the kitchen to browse our catalogue of drawers and cabinets.
Godrej Respresentative
1.
Refactoring the Base
The first step was restructuring the existing interaction code. Rendering, animation, and interaction logic were separated and cleaned up.
This made it possible to introduce more complex behavior without affecting other modules.
The first step was restructuring the existing interaction code. Rendering, animation, and interaction logic were separated and cleaned up.
This made it possible to introduce more complex behavior without affecting other modules.
2.
Building the Nested Hotspot System
I designed a two-level interaction model:
Three primary hotspots act as entry points.
Clicking one shifts the camera. Inside that view, multiple secondary hotspots become visible.
This layered behavior did not exist in any other scene,it was introduced specifically for the Kitchen.
I designed a two-level interaction model:
Three primary hotspots act as entry points.
Clicking one shifts the camera. Inside that view, multiple secondary hotspots become visible.
This layered behavior did not exist in any other scene,it was introduced specifically for the Kitchen.
3.
Animation & Camera Control
All object animations were manually coded.
When users click a product:
The camera transitions smoothly
The object animates (drawer opens, pantry slides, etc.)
The UI panel appears in sync
All object animations were manually coded.
When users click a product:
The camera transitions smoothly
The object animates (drawer opens, pantry slides, etc.)
The UI panel appears in sync
4.
Optimization
The Kitchen scene contained multiple models, animations, and layered hotspots, which increased render load.
I reduced unnecessary re-renders, limited raycasting to active elements and controlled animation updates more selectively. Textures and scene updates were also refined to maintain stable frame rates as users navigated between zones.
The Kitchen scene contained multiple models, animations, and layered hotspots, which increased render load.
I reduced unnecessary re-renders, limited raycasting to active elements and controlled animation updates more selectively. Textures and scene updates were also refined to maintain stable frame rates as users navigated between zones.
Conclusion
This project pushed me to think more structurally about interactive systems. Building the Kitchen module from scratch meant dealing with messy foundations, designing a layered interaction model, and making technical decisions that balanced flexibility with performance.
I learned how to manage complexity inside a real-time 3D environment — especially when animations, camera movement, UI, and state all need to work together without conflict.
You can explore the live experience here: Godrej LAFS
This project pushed me to think more structurally about interactive systems. Building the Kitchen module from scratch meant dealing with messy foundations, designing a layered interaction model, and making technical decisions that balanced flexibility with performance.
I learned how to manage complexity inside a real-time 3D environment — especially when animations, camera movement, UI, and state all need to work together without conflict.
You can explore the live experience here: Godrej LAFS
Fintech
Product Design
Web+mobile
0-1 product design of a Stock trading platform
End-to-end product design of a multi-asset trading ecosystem, aligning advanced trading workflows with an intuitive, cross-platform experience.
next case study