From 42d17b1931d930b5a61c4bef26badd19e1969ac6 Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Thu, 4 Jun 2026 09:58:03 +0200 Subject: [PATCH 01/19] feat(iframe): element + /television demo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a new public element across all three renderers for placing live iframes in 3D space, plus a five-TV demo page. - packages/polycss: PolyIframeElement (vanilla custom element). Mounts an iframe wrapper inside the parent 's .polycss-scene so the CSS camera transform composes naturally with surrounding meshes. Same position/rotation/scale conventions as post-parity (world units, world-axis order, rotation conjugation rotateY(-rx) rotateX(-ry) rotateZ(-rz)). Width/height in world units; iframe centred at the wrapper's local origin so rotation/scale pivot at the visible centre. - packages/react: mirror with the same props. - packages/vue: mirror with the same props. - 14/8/7 tests added per package; transform math + attribute forwarding pinned. AGENTS.md updated with the new element + naming entry. Bug fixes shipped alongside: - PolyPerspectiveCameraElement / PolyOrthographicCameraElement runtime attribute updates now mutate the camera handle in place and re-apply the scene transform. Before, the elements either recreated the handle (orphaning the scene's pointer) or updated but never called applyCamera, so rot-x/rot-y/zoom changes were ignored at runtime. - DocsHeader hides the floating search dock on /television (matches /gallery, /builder, /wordart). /television demo: - Vertical-rail TV picker (5 sets, hand-drawn SVG art per tile). ?tv=id query param + popstate sync so individual TVs are linkable. - Per-TV polygon indices identify which face(s) are the screen; the page derives the iframe's world-unit position, rotation, width, and height from those polygons' vertices at load time (area-weighted normal, bbox in the in-plane right/up basis, small lift along the normal so the iframe doesn't z-fight with the screen polygon itself). Per-TV rotY + zoom remain hand-tuned because GLB authoring orientations differ. - Retro Stack uses multiple screen entries — one per CRT is mounted dynamically and each is placed independently. --- AGENTS.md | 5 +- .../src/elements/PolyIframeElement.test.ts | 201 ++++++ .../polycss/src/elements/PolyIframeElement.ts | 223 ++++++ .../elements/PolyOrthographicCameraElement.ts | 12 + .../elements/PolyPerspectiveCameraElement.ts | 35 +- packages/polycss/src/elements/index.ts | 5 + packages/polycss/src/index.ts | 1 + packages/react/src/index.ts | 3 +- packages/react/src/scene/PolyIframe.test.tsx | 129 ++++ packages/react/src/scene/PolyIframe.tsx | 133 ++++ packages/react/src/scene/index.ts | 2 + packages/vue/src/index.ts | 2 + packages/vue/src/scene/PolyIframe.test.ts | 116 ++++ packages/vue/src/scene/PolyIframe.ts | 130 ++++ packages/vue/src/scene/index.ts | 2 + website/public/television/electronic-tv.glb | Bin 0 -> 83644 bytes website/public/television/materials.mtl | 114 ++++ website/public/television/monitor.glb | Bin 0 -> 60336 bytes website/public/television/old-tv.glb | Bin 0 -> 235456 bytes website/public/television/retro-tvs.glb | Bin 0 -> 118720 bytes website/public/television/tv-obj.obj | 334 +++++++++ website/src/components/DocsHeader.astro | 3 +- website/src/pages/television.astro | 646 ++++++++++++++++++ 23 files changed, 2087 insertions(+), 9 deletions(-) create mode 100644 packages/polycss/src/elements/PolyIframeElement.test.ts create mode 100644 packages/polycss/src/elements/PolyIframeElement.ts create mode 100644 packages/react/src/scene/PolyIframe.test.tsx create mode 100644 packages/react/src/scene/PolyIframe.tsx create mode 100644 packages/vue/src/scene/PolyIframe.test.ts create mode 100644 packages/vue/src/scene/PolyIframe.ts create mode 100644 website/public/television/electronic-tv.glb create mode 100644 website/public/television/materials.mtl create mode 100644 website/public/television/monitor.glb create mode 100644 website/public/television/old-tv.glb create mode 100644 website/public/television/retro-tvs.glb create mode 100644 website/public/television/tv-obj.obj create mode 100644 website/src/pages/television.astro diff --git a/AGENTS.md b/AGENTS.md index ff3ca292..a0058ad3 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -86,11 +86,12 @@ If you find yourself wanting a `requestAnimationFrame` loop to update many DOM n - Brand text is **PolyCSS**. Keep lowercase `polycss` only for literal package names, import paths, CSS classes, domains, and other code identifiers. - Every public export gets a `Poly` prefix. Exceptions are generic math types: `Vec2`, `Vec3`, `Polygon`, `PolyMaterial` (already prefixed). - **Hooks/composables:** `usePolyCamera`, `usePolyMesh`, `usePolySceneContext`, `usePolySelect`, `usePolySelectionApi`, `usePolyAnimation`. -- **Components:** `PolyPerspectiveCamera`, `PolyOrthographicCamera`, `PolyOrbitControls`, `PolyMapControls`, `PolyTransformControls`, `PolySelect`, `PolyAxesHelper`, `PolyDirectionalLightHelper`. +- **Components:** `PolyPerspectiveCamera`, `PolyOrthographicCamera`, `PolyOrbitControls`, `PolyMapControls`, `PolyTransformControls`, `PolySelect`, `PolyAxesHelper`, `PolyDirectionalLightHelper`, `PolyIframe`. - **Types:** `PolyDirectionalLight`, `PolyAmbientLight`, `PolyTextureLightingMode`, `PolyAnimationMixer`, `PolyRenderStats`. - **Functions:** `findPolyMeshHandle`, `injectPolyBaseStyles`, `collectPolyRenderStats`, `exportPolySceneSnapshot`. - **Vanilla factories:** `create*` names stay as-is (`createPolyScene`, `createTransformControls`, `createSelect`). -- **HTML custom elements:** `poly-` prefix + kebab-case. Existing tags: ``, ``, ``, ``, ``, ``, ``. Any new element follows the same shape (e.g. ``, ``). +- **HTML custom elements:** `poly-` prefix + kebab-case. Existing tags: ``, ``, ``, ``, ``, ``, ``, ``. Any new element follows the same shape (e.g. ``, ``). +- **``:** flat textured "quad" whose "texture" is a live document (an `