Stack
About
To support product launches on swoosh.nike, we built an interactive product gallery component that allows users to view and interact with the product in 3D.
The initial desire for the component was to encourage interaction and product discovery, but keeps authoring and opreational simplicity in mind.
Requirements
The gallery is built with React, React Three Fiber and Next.js. The initial requirements were
- Support for multiple products
- Support for multiple variants of each product
- Support for (n) number of content tabs, with markdown content support for each tab
- Ability to author camera angles tied to each content tab, with smooth transitions between angles
- Ability to trigger animations tied to each content tab (with support for looping)
- Retain content authoring in Contentful (our CMS) but allow 3D model authoring in Blender (to reduce friction for designers and digital ops)
Implementation
In order to seperate content authoring from 3D model authoring, we decided to extend the glTF format to include metadata for the product gallery. This allowed us to author the content in Contentful and the 3D model in Blender.
To ease the burden on designers, I built a Blender plugin that allows them to author the special animations and 3D behaviors for each product directly in Blender, and the plugin would take care of exporting the metadata embedded in the glTF file.
Once the files are exported, they are handed off to Contentful authoring, which adds the content for each tab.
On the frontend, I built a React component that leavrages the special metadata embedded in the glTF file to trigger the animations and 3D behaviors for each product, making it easy to author, scale and maintain.
Examples
The Interactive Product Gallery component was used in a number of product launches on swoosh.nike without requiring additional engineering effort.