Porsche Showcase — a scroll-driven 3D car configurator
Porsche Showcase is a real-time WebGL page where scrolling drives the camera. The page scroll position is mapped onto a Theatre.js animation sequence, so the camera, the lighting and the reveal of the car are all scrubbed frame by frame as you move down the page, with Lenis smoothing the scroll itself.
The car is a DRACO-compressed glTF model rendered with three.js and lit by an HDRI studio environment map, so the paint reads as a real physically based material. The configurator panel repaints body and wheels by swapping the material colour on the loaded meshes at runtime, and a render button reads the WebGL canvas back to download the current configuration as an image. Hotspots placed in the scene zoom the camera to detail shots.
Requires a browser with WebGL. This page needs JavaScript to run the 3D scene.