Aligned overlay

This DOM element is transformed in 3D so it tracks the plane geometry as the camera moves. Hover the overlay and scroll to read the rest — the wheel event stays inside the panel and never reaches the orbit camera.

Placeholder landscape
Fig. 1 — A placeholder image rendered through the same 3D transform as its container.

Embedded video

The transform pipeline is just CSS, so any DOM content composites into the scene without special handling. That includes media elements with their own internal layout and controls.

Fig. 2 — An HTML5 video element. Controls remain interactive even while the panel is rotated.

Why this works

The renderer pushes the camera's world-to-view matrix onto a wrapper element and each object's world matrix onto its own element. Because the overlay's local frame matches the plane entity's local frame, the two stay locked together at every camera angle.

Second placeholder image
Fig. 3 — Another placeholder, sized to its container's content width.

Search-friendly content

Because the overlay is real DOM rather than a WebGL texture, search engines can crawl every word, image, and video on this panel exactly as if it were a normal page. The 3D transform is a presentation detail — the underlying document is untouched.

Scroll back up to return to the top, or keep going — there's nothing here, but the scrollbar still proves the panel is a regular scrollable region living inside a perspective-projected world.

Aligned overlay

This DOM element is transformed in 3D so it tracks the plane geometry as the camera moves. Hover the overlay and scroll to read the rest — the wheel event stays inside the panel and never reaches the orbit camera.

Placeholder landscape
Fig. 1 — A placeholder image rendered through the same 3D transform as its container.

Embedded video

The transform pipeline is just CSS, so any DOM content composites into the scene without special handling. That includes media elements with their own internal layout and controls.

Fig. 2 — An HTML5 video element. Controls remain interactive even while the panel is rotated.

Why this works

The renderer pushes the camera's world-to-view matrix onto a wrapper element and each object's world matrix onto its own element. Because the overlay's local frame matches the plane entity's local frame, the two stay locked together at every camera angle.

Second placeholder image
Fig. 3 — Another placeholder, sized to its container's content width.

Search-friendly content

Because the overlay is real DOM rather than a WebGL texture, search engines can crawl every word, image, and video on this panel exactly as if it were a normal page. The 3D transform is a presentation detail — the underlying document is untouched.

Scroll back up to return to the top, or keep going — there's nothing here, but the scrollbar still proves the panel is a regular scrollable region living inside a perspective-projected world.