We wanted to make the virtual reality experience from the Wayfair Next team available to people without access VR headsets. With Wayfair being an eCommerce website, using web technologies was an obvious choice.
What it does
Provides a 3D web interface in which you can add Wayfair furniture to a room, look at it from different angles, and move it around. You can also change the color and dimensions of the room.
How we built it
We used THREE.js for the 3D rendering. We used React for the UI and Redux for state management.
Challenges we ran into
3D programming also brings a lot of challenges if you aren't well versed in it. Luckily THREE.js has some nice helper objects to visualize things like axes and light directions.
Accomplishments that we're proud of
Successfully getting the furniture models to load, and being able to move them around.
What we learned
We learned a lot about 3D rendering. Some of us who weren't as familiar with React/Redux learned a lot about those frameworks.
What's next for Wayfair Now
Implement it on Wayfair's website :).
We'd also like to get the furniture textures loaded and add more room customization options. One thing we planned to do but didn't get to was uploading a picture of your room and mapping that image to the walls in the 3D view.