Flat 2D panels disappear into the background of 3D scenes — they lack the physical presence that signals "this is an interactive surface you can read and click." Adding depth transforms a panel into a tactile card that reads as a real object; the thickness differentiates it from the void and the beveled edges frame the content. Without extrusion, UI content in 3D space feels floating and passive.

createCard3D(opts) returns a three.js Mesh with a thin extruded box: a front face that renders UI content (SurfaceContent — flat color, paint callback, or WidgetSpec), plus matching side/back/top/bottom faces for the beveled edge. The depth prop (default 0.06) sets extrusion thickness; the optional edge prop controls edge color (defaults to dark).

Call createCard3D({ width: 2, height: 1.5, front: { type: 'color', color: '#fff' }, scene }) to create and add it to a three scene. For widget content, pass front: { type: 'widget', widget: mySpec }. Position and rotate the returned mesh like any three.js object; it exists independently of the DOM and is bridgeable to agents via stable handle setup in a future MCP adapter.