Challenge
The project goal was to design and develop a 360 degree simulator that would showcase three types of kitchens (I, L and Island) and 4 base styles (that could be modified by the user).
Inside the simulator, the users should be able to modify some elements of the kitchen, such as the counters, cabinets, knobs, floors, wall paint and coating, baseboard, hoven position and choose to replace top cabinets with shelves.
Layout and style selection
Upon entering the simulator, the user is asked to choose the desired layout and a base theme for the kitchen.
Each kitchen theme had it’s elements (such has colors or door knobs), while some elements were shared through all the available kitchens.
Kitchen 3D Solution
After selection the prefered layout and kitchen base theme, the user would proceed into the 3D simulation of the kitchen. All the kitchens and their assets were modelled in Blender, based of the real Worten’s Kitchens. Our solution was to render each kitchen’s elements isolated in a equirectangular perspective “photograph”.
The rendered assets would then be compressed and assembled in various layers to form the final kitchen aspect with ThreeJS, using a camera inside a sphere with the layers as textures. In this way, if the user were to change the cabinet color, for example, the simulator would only need to replace the cabinet layer.
Mobile Interaction
The user can easily navigate between components in the bottom bar. The selection panel opens when the user presses a new components or double clicks in the kitchen window.
Some components offer different options such has the kitchen counter, which comes in different sizes, selectable through a dropdown.
The user can rotate the kitchen window by tapping and dragging it.
Desktop Interaction
The user is shown a quick tutorial explaining how the components work. Like in the mobile version, the user can rotate the kitchen window by clicking and dragging it.
Simulation complete
The user can choose to see more information about the Worten Kitchens or conclude his simulation. When the simulation is complete, the simulator shows a print screen and overview of the simulation. The user can always go back and change other elements in the simulation or schedule a meeting with Worten.
