Product Studio template
Show one product in a photo studio, let people choose its colours and materials, and place it at real size in VR or in their own room.
- Built on
- Product viewer and configurator, React Three Fiber + @react-three/xr, in a Vite project. It is ordinary code in a folder on your computer: read it, edit it, keep it.
- Comes with
- The Builder plan and higher. See pricing.
- Runs on
- Any WebXR browser, such as Meta Quest and Apple Vision Pro, and a flat screen with mouse or touch. The app has an emulated headset to try it before you put one on.
Requests to try
Start a project from this template and send one of these as it is, or change it to what you have in mind.
- Add a price to every choice, show the total in the headset panel and on the options card, and add a Summary button that lists the chosen configuration.
- Add a deep navy shell with a gloss finish and a velvet seat pad in forest green, and make them the defaults.
- Turn the exploded view into a step-by-step assembly: a Next button brings the legs, frame, shell and seat pad together one at a time and shows the name of the part.
- Add callouts for the backrest, the frame and the feet, and a Tour button that opens them one after another while the chair turns to show each one.
- Make it a dark showroom: charcoal backdrop, one warm key light, and a slow sweep of light across the chair whenever an option changes.
Made from this template
Real projects that started here, each with the request that built it.
Product Studio templateChair configurator
Point at a swatch and pull the trigger: shell colour, seat pad and legs change on the chair, the price adds up, and a summary lists the choice.
- Controllers
- Product configurator
- PBR materials
- Spatial labels
Read the request that made it (one run)
Start from it
Download Graspable, choose Product Studio when you create a project, and say what you want. The agent edits the project on your computer and a run ends only when it builds and loads in a real browser.