A Live Web App, On a 3D Monitor

What this is

A textured 3D model of a beige desktop PC. The monitor's screen is a dynamic texture showing a mock product page running live. Click links, scroll, fill the form, all while you orbit the model in WebGL. The page on the monitor is genuinely live HTML; the 3D scene is just where it happens to be displayed.

The puzzle that started it

After the DOOM experiment, the cleaner question was: could you put a real product UI inside a real 3D scene and have it feel inevitable rather than gimmicky? A desktop PC is a familiar frame; a marketing page is a familiar surface; combine them and the trick of html-in-canvas stops being a trick and becomes a UX pattern.

How I built it

Same pipeline as DOOM, applied to a cleaner case. Three.js scene, textured PC model, the monitor's screen-plane gets the live HTML page as its texture. Pointer events are inverse-projected from screen-space through the camera and the model's transform back to the 2D space of the page. Click on the rendered monitor and the live page receives that click.

What this is an example of

Real product UIs embedded inside richer 3D scenes. Configurators, immersive landing pages, anywhere a web UI wants to live in a context that is not flat. Same html-in-canvas pipeline as DOOM, applied to the cleaner case: any product UI can live inside any scene, with no compromise on how the UI itself behaves.

If you have a product where the rectangle is not enough, the same pipeline is ready to apply.