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

Our biggest challenge was loading the furniture models into THREE.js. The models were in a binary .fbx format which is difficult to parse using JavaScript. We were able to convert to the ASCII .fbx format and load them in. But we weren't able to load the materials for the models. So unfortunately the models are just gray and untextured for now.

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.

Built With

Share this project: