Inspiration

Shrenik approached Connor and Javier with a bunch of 3D renderings from 145 perspectives. He suggested that this would be a great way to bring the PDP image to life.

What it does

When a user opens a PDP with a rendering, they will notice that the furniture appears to move in the room that they are seeing.

How we built it

Shrenik rendered a piece of furniture in a room, and then we used the device orientation API to animate the image on mobile devices, and the user's mouse to animate the room on desktop.

Challenges we ran into

It's difficult to actually decide which cuts of the rendered furniture to use. Do we show a large range of motion is jittery and allows the user to see more of the furniture? Or just a small range of motion that is very smooth? We ended up staying with the smoother effect.

Accomplishments that we're proud of

The actual experience is pretty delightful if you are not expecting the PDP to be animated.

What we learned

Connor became more familiar with the device orientation API. We definitely learned a bit about how to animate items.

What's next for Three Dimensional Product Detail Images

  • Fully build out the user interface for users who want to tap/move around the room on mobile, and click on desktop.
  • Performance test
  • Build out a catalogue of 3D rendered images for more SKUs
  • User test the most effective algorithms for handling the user's panning with a smartphone.

When trying this out, be sure to turn on the Pure React/Redux PDP! ?ft_override_pure_react_pdp=ON

To see a gif of how this would work (with a simulated phone screen in Chrome) - check out https://drive.google.com/a/wayfair.com/file/d/1pRFxA-0iHNSjCYYVwHkb5FNCuSrDnsl1/view?usp=sharing

Built With

  • device-orientation-api
  • 3d-renderings
Share this project:
×

Updates