Pick a seat in a 3D cinema, fly to it and watch the film from there. The film lights the room as it plays, and a 4D track adds fog, drizzle, smoke, sparks, embers, strobes and seat motion at the right moments. Built with three.js, its WebGPU renderer and TSL (it falls back to WebGL 2 where WebGPU isn't available).
A new take on the 2016 Cinema Seat Preview Experiment, which was made with CSS 3D transforms.
- A cinema at real proportions: a curved widescreen 12 m wide, 12 stadium rows, the first one about as far from the screen as the screen is wide.
- The film lights the room: each frame is split into 8x3 patches that light every surface like small area lights.
- Fly to any seat by clicking it in the room or on the seat map. Hovering a seat on the map shows the live view from it.
- Ticket stubs, a total and a booking button. Some seats are already taken; the best ones are marked.
- Sound from the screen, placed in 3D, so you hear it from where you sit.
- A 4D track cued to the film, with a switch to turn it off.
- An audience in the taken seats, lit by the film. Nobody's head reaches a sightline to the screen, from any seat.
- A preloader taken from the film's first shot: a battery charging from 2% as the demo loads.
- Tilt your phone to look around.
- Click a seat (in the room or on the map) to fly there. Drag to look around.
- Arrow keys: jump into a seat, then move seat by seat (left and right) or row by row (up and down).
- A: add the seat you're in to your tickets. Esc: back up to the overview. Space: play or pause. S: stop the film (the house lights come back up).
- On the map, Tab in, then use the arrow keys and Enter.
Run this demo on a local server that supports range requests for the video, for example npx serve .. There's no build step: three.js and GSAP are in js/lib/.
- The film is a cut of Charge (2022), © Blender Foundation | studio.blender.org/charge, licensed under Creative Commons Attribution 4.0. Shortened to about 55 seconds and re-encoded for this demo.
- three.js and GSAP.
Follow Codrops: Bluesky, Facebook, GitHub, Instagram, X
The code is MIT. The film in assets/ isn't covered by the MIT license: it's licensed under Creative Commons Attribution 4.0 (see Credits).