From 4a6aba8a594e83019851e6d85c0776976c797ca2 Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Thu, 21 May 2026 02:12:11 +0200 Subject: [PATCH 001/107] chore: add examples/* to pnpm workspace --- pnpm-lock.yaml | 114 ++++++++++++++++++++++++++++++++++++++++++++ pnpm-workspace.yaml | 1 + 2 files changed, 115 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f6f453a9..b3535836 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,6 +30,79 @@ importers: specifier: ^3.5.30 version: 3.5.30(typescript@5.9.3) + examples/html: + dependencies: + '@layoutit/polycss': + specifier: workspace:^ + version: link:../../packages/polycss + devDependencies: + typescript: + specifier: ^5.3.3 + version: 5.9.3 + vite: + specifier: ^6.0.0 + version: 6.4.1(@types/node@25.5.0) + + examples/react: + dependencies: + '@layoutit/polycss-react': + specifier: workspace:^ + version: link:../../packages/react + react: + specifier: ^19.0.0 + version: 19.2.6 + react-dom: + specifier: ^19.0.0 + version: 19.2.6(react@19.2.6) + devDependencies: + '@types/react': + specifier: ^19.0.0 + version: 19.2.14 + '@types/react-dom': + specifier: ^19.0.0 + version: 19.2.3(@types/react@19.2.14) + '@vitejs/plugin-react': + specifier: ^4.0.0 + version: 4.7.0(vite@6.4.1(@types/node@25.5.0)) + typescript: + specifier: ^5.3.3 + version: 5.9.3 + vite: + specifier: ^6.0.0 + version: 6.4.1(@types/node@25.5.0) + + examples/vanilla: + dependencies: + '@layoutit/polycss': + specifier: workspace:^ + version: link:../../packages/polycss + devDependencies: + typescript: + specifier: ^5.3.3 + version: 5.9.3 + vite: + specifier: ^6.0.0 + version: 6.4.1(@types/node@25.5.0) + + examples/vue: + dependencies: + '@layoutit/polycss-vue': + specifier: workspace:^ + version: link:../../packages/vue + vue: + specifier: ^3.5.12 + version: 3.5.30(typescript@5.9.3) + devDependencies: + '@vitejs/plugin-vue': + specifier: ^5.0.0 + version: 5.2.4(vite@6.4.1(@types/node@25.5.0))(vue@3.5.30(typescript@5.9.3)) + typescript: + specifier: ^5.3.3 + version: 5.9.3 + vite: + specifier: ^6.0.0 + version: 6.4.1(@types/node@25.5.0) + packages/core: devDependencies: '@vitest/coverage-v8': @@ -1028,6 +1101,9 @@ packages: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} + '@rolldown/pluginutils@1.0.0-beta.27': + resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==} + '@rolldown/pluginutils@1.0.0-rc.3': resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==} @@ -1304,12 +1380,25 @@ packages: '@ungap/structured-clone@1.3.0': resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==} + '@vitejs/plugin-react@4.7.0': + resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 + '@vitejs/plugin-react@5.2.0': resolution: {integrity: sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==} engines: {node: ^20.19.0 || >=22.12.0} peerDependencies: vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 + '@vitejs/plugin-vue@5.2.4': + resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==} + engines: {node: ^18.0.0 || >=20.0.0} + peerDependencies: + vite: ^5.0.0 || ^6.0.0 + vue: ^3.2.25 + '@vitest/coverage-v8@3.2.4': resolution: {integrity: sha512-EyF9SXU6kS5Ku/U82E259WSnvg6c8KTjppUncuNdm5QHpe17mwREHnjDzozC8x9MZ0xfBUFSaLkRv4TMA75ALQ==} peerDependencies: @@ -2433,6 +2522,10 @@ packages: peerDependencies: react: ^19.2.6 + react-refresh@0.17.0: + resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==} + engines: {node: '>=0.10.0'} + react-refresh@0.18.0: resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==} engines: {node: '>=0.10.0'} @@ -3793,6 +3886,8 @@ snapshots: '@pkgjs/parseargs@0.11.0': optional: true + '@rolldown/pluginutils@1.0.0-beta.27': {} + '@rolldown/pluginutils@1.0.0-rc.3': {} '@rollup/pluginutils@5.3.0(rollup@4.60.0)': @@ -4037,6 +4132,18 @@ snapshots: '@ungap/structured-clone@1.3.0': {} + '@vitejs/plugin-react@4.7.0(vite@6.4.1(@types/node@25.5.0))': + dependencies: + '@babel/core': 7.29.0 + '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0) + '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0) + '@rolldown/pluginutils': 1.0.0-beta.27 + '@types/babel__core': 7.20.5 + react-refresh: 0.17.0 + vite: 6.4.1(@types/node@25.5.0) + transitivePeerDependencies: + - supports-color + '@vitejs/plugin-react@5.2.0(vite@7.3.1(@types/node@25.5.0))': dependencies: '@babel/core': 7.29.0 @@ -4049,6 +4156,11 @@ snapshots: transitivePeerDependencies: - supports-color + '@vitejs/plugin-vue@5.2.4(vite@6.4.1(@types/node@25.5.0))(vue@3.5.30(typescript@5.9.3))': + dependencies: + vite: 6.4.1(@types/node@25.5.0) + vue: 3.5.30(typescript@5.9.3) + '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/debug@4.1.13)(@types/node@25.5.0)(happy-dom@17.6.3))': dependencies: '@ampproject/remapping': 2.3.0 @@ -5735,6 +5847,8 @@ snapshots: react: 19.2.6 scheduler: 0.27.0 + react-refresh@0.17.0: {} + react-refresh@0.18.0: {} react@19.2.4: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 862ad8c0..c9cfc164 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,3 +1,4 @@ packages: - 'packages/*' - 'website' + - 'examples/*' From 6e50e8d8cbcd7ef7eabe23b2f7be91e1a3201533 Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Thu, 21 May 2026 02:12:13 +0200 Subject: [PATCH 002/107] feat(examples): add html custom-elements examples app --- examples/html/baked-shapes/index.html | 21 +++++++++++++++++++++ examples/html/index.html | 26 ++++++++++++++++++++++++++ examples/html/multi-mesh/index.html | 23 +++++++++++++++++++++++ examples/html/package.json | 18 ++++++++++++++++++ examples/html/solid-glb/index.html | 21 +++++++++++++++++++++ examples/html/textured-glb/index.html | 25 +++++++++++++++++++++++++ examples/html/tsconfig.json | 10 ++++++++++ examples/html/vite.config.ts | 17 +++++++++++++++++ examples/html/voxel/index.html | 21 +++++++++++++++++++++ 9 files changed, 182 insertions(+) create mode 100644 examples/html/baked-shapes/index.html create mode 100644 examples/html/index.html create mode 100644 examples/html/multi-mesh/index.html create mode 100644 examples/html/package.json create mode 100644 examples/html/solid-glb/index.html create mode 100644 examples/html/textured-glb/index.html create mode 100644 examples/html/tsconfig.json create mode 100644 examples/html/vite.config.ts create mode 100644 examples/html/voxel/index.html diff --git a/examples/html/baked-shapes/index.html b/examples/html/baked-shapes/index.html new file mode 100644 index 00000000..b8d316a4 --- /dev/null +++ b/examples/html/baked-shapes/index.html @@ -0,0 +1,21 @@ + + + + + + baked-shapes — polycss HTML + + + + + + + + + + + + diff --git a/examples/html/index.html b/examples/html/index.html new file mode 100644 index 00000000..4344efb2 --- /dev/null +++ b/examples/html/index.html @@ -0,0 +1,26 @@ + + + + + + polycss — HTML examples + + + +

polycss — HTML (custom elements)

+ + + diff --git a/examples/html/multi-mesh/index.html b/examples/html/multi-mesh/index.html new file mode 100644 index 00000000..4192e2a2 --- /dev/null +++ b/examples/html/multi-mesh/index.html @@ -0,0 +1,23 @@ + + + + + + multi-mesh — polycss HTML + + + + + + + + + + + + + + diff --git a/examples/html/package.json b/examples/html/package.json new file mode 100644 index 00000000..bb53c0b1 --- /dev/null +++ b/examples/html/package.json @@ -0,0 +1,18 @@ +{ + "name": "@layoutit/polycss-examples-html", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@layoutit/polycss": "workspace:^" + }, + "devDependencies": { + "typescript": "^5.3.3", + "vite": "^6.0.0" + } +} diff --git a/examples/html/solid-glb/index.html b/examples/html/solid-glb/index.html new file mode 100644 index 00000000..a4e81490 --- /dev/null +++ b/examples/html/solid-glb/index.html @@ -0,0 +1,21 @@ + + + + + + solid-glb — polycss HTML + + + + + + + + + + + + diff --git a/examples/html/textured-glb/index.html b/examples/html/textured-glb/index.html new file mode 100644 index 00000000..7c3bb502 --- /dev/null +++ b/examples/html/textured-glb/index.html @@ -0,0 +1,25 @@ + + + + + + textured-glb — polycss HTML + + + + + + + + + + + + diff --git a/examples/html/tsconfig.json b/examples/html/tsconfig.json new file mode 100644 index 00000000..18f54623 --- /dev/null +++ b/examples/html/tsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "Bundler", + "strict": true, + "lib": ["ES2020", "DOM"] + }, + "include": ["**/*.ts"] +} diff --git a/examples/html/vite.config.ts b/examples/html/vite.config.ts new file mode 100644 index 00000000..99f34591 --- /dev/null +++ b/examples/html/vite.config.ts @@ -0,0 +1,17 @@ +import { defineConfig } from "vite"; +import { resolve } from "path"; + +export default defineConfig({ + build: { + rollupOptions: { + input: { + main: resolve(__dirname, "index.html"), + "baked-shapes": resolve(__dirname, "baked-shapes/index.html"), + "multi-mesh": resolve(__dirname, "multi-mesh/index.html"), + "solid-glb": resolve(__dirname, "solid-glb/index.html"), + "textured-glb": resolve(__dirname, "textured-glb/index.html"), + voxel: resolve(__dirname, "voxel/index.html"), + }, + }, + }, +}); diff --git a/examples/html/voxel/index.html b/examples/html/voxel/index.html new file mode 100644 index 00000000..fdcd5e70 --- /dev/null +++ b/examples/html/voxel/index.html @@ -0,0 +1,21 @@ + + + + + + voxel — polycss HTML + + + + + + + + + + + + From 906f24d981d983437b2c76a062c4e1903dc8dcab Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Thu, 21 May 2026 02:12:15 +0200 Subject: [PATCH 003/107] feat(examples): add vanilla imperative examples app --- examples/vanilla/animated/index.html | 16 ++++++++++++ examples/vanilla/animated/main.ts | 31 ++++++++++++++++++++++++ examples/vanilla/baked-shapes/index.html | 16 ++++++++++++ examples/vanilla/baked-shapes/main.ts | 13 ++++++++++ examples/vanilla/index.html | 27 +++++++++++++++++++++ examples/vanilla/multi-mesh/index.html | 16 ++++++++++++ examples/vanilla/multi-mesh/main.ts | 17 +++++++++++++ examples/vanilla/package.json | 18 ++++++++++++++ examples/vanilla/solid-glb/index.html | 16 ++++++++++++ examples/vanilla/solid-glb/main.ts | 16 ++++++++++++ examples/vanilla/textured-glb/index.html | 16 ++++++++++++ examples/vanilla/textured-glb/main.ts | 18 ++++++++++++++ examples/vanilla/tsconfig.json | 10 ++++++++ examples/vanilla/vite.config.ts | 18 ++++++++++++++ examples/vanilla/voxel/index.html | 16 ++++++++++++ examples/vanilla/voxel/main.ts | 16 ++++++++++++ 16 files changed, 280 insertions(+) create mode 100644 examples/vanilla/animated/index.html create mode 100644 examples/vanilla/animated/main.ts create mode 100644 examples/vanilla/baked-shapes/index.html create mode 100644 examples/vanilla/baked-shapes/main.ts create mode 100644 examples/vanilla/index.html create mode 100644 examples/vanilla/multi-mesh/index.html create mode 100644 examples/vanilla/multi-mesh/main.ts create mode 100644 examples/vanilla/package.json create mode 100644 examples/vanilla/solid-glb/index.html create mode 100644 examples/vanilla/solid-glb/main.ts create mode 100644 examples/vanilla/textured-glb/index.html create mode 100644 examples/vanilla/textured-glb/main.ts create mode 100644 examples/vanilla/tsconfig.json create mode 100644 examples/vanilla/vite.config.ts create mode 100644 examples/vanilla/voxel/index.html create mode 100644 examples/vanilla/voxel/main.ts diff --git a/examples/vanilla/animated/index.html b/examples/vanilla/animated/index.html new file mode 100644 index 00000000..88603149 --- /dev/null +++ b/examples/vanilla/animated/index.html @@ -0,0 +1,16 @@ + + + + + + animated — polycss vanilla + + + +
+ + + diff --git a/examples/vanilla/animated/main.ts b/examples/vanilla/animated/main.ts new file mode 100644 index 00000000..48d80e21 --- /dev/null +++ b/examples/vanilla/animated/main.ts @@ -0,0 +1,31 @@ +import { + createPolyPerspectiveCamera, + createPolyScene, + createPolyOrbitControls, + createPolyAnimationMixer, + loadMesh, +} from "@layoutit/polycss"; + +const host = document.getElementById("host")!; +const camera = createPolyPerspectiveCamera({ rotX: 65, rotY: 45 }); +const scene = createPolyScene(host, { camera, autoCenter: true }); + +createPolyOrbitControls(scene); + +loadMesh("https://polycss.com/gallery/glb/AnimatedWizard.glb").then((result) => { + const mesh = scene.add(result, { merge: false, stableDom: true }); + + if (result.animation && result.animation.clips.length > 0) { + const mixer = createPolyAnimationMixer(mesh, result.animation); + mixer.clipAction(result.animation.clips[0].name).play(); + + let lastTime: number | null = null; + function tick(now: number) { + if (lastTime === null) { lastTime = now; } + mixer.update((now - lastTime) / 1000); + lastTime = now; + requestAnimationFrame(tick); + } + requestAnimationFrame(tick); + } +}); diff --git a/examples/vanilla/baked-shapes/index.html b/examples/vanilla/baked-shapes/index.html new file mode 100644 index 00000000..07c55f14 --- /dev/null +++ b/examples/vanilla/baked-shapes/index.html @@ -0,0 +1,16 @@ + + + + + + baked-shapes — polycss vanilla + + + +
+ + + diff --git a/examples/vanilla/baked-shapes/main.ts b/examples/vanilla/baked-shapes/main.ts new file mode 100644 index 00000000..da6cdb81 --- /dev/null +++ b/examples/vanilla/baked-shapes/main.ts @@ -0,0 +1,13 @@ +import { + createPolyOrthographicCamera, + createPolyScene, + createPolyOrbitControls, + createPolyIcosahedron, +} from "@layoutit/polycss"; + +const host = document.getElementById("host")!; +const camera = createPolyOrthographicCamera({ rotX: 65, rotY: 45 }); +const scene = createPolyScene(host, { camera }); + +createPolyOrbitControls(scene, { animate: { speed: 0.3 } }); +scene.add(createPolyIcosahedron({ size: 100, color: "#ff6644" })); diff --git a/examples/vanilla/index.html b/examples/vanilla/index.html new file mode 100644 index 00000000..7ecd3b30 --- /dev/null +++ b/examples/vanilla/index.html @@ -0,0 +1,27 @@ + + + + + + polycss — vanilla examples + + + +

polycss — vanilla (imperative API)

+ + + diff --git a/examples/vanilla/multi-mesh/index.html b/examples/vanilla/multi-mesh/index.html new file mode 100644 index 00000000..d1f31d93 --- /dev/null +++ b/examples/vanilla/multi-mesh/index.html @@ -0,0 +1,16 @@ + + + + + + multi-mesh — polycss vanilla + + + +
+ + + diff --git a/examples/vanilla/multi-mesh/main.ts b/examples/vanilla/multi-mesh/main.ts new file mode 100644 index 00000000..7cce75b6 --- /dev/null +++ b/examples/vanilla/multi-mesh/main.ts @@ -0,0 +1,17 @@ +import { + createPolyOrthographicCamera, + createPolyScene, + createPolyOrbitControls, + createPolyBox, + createPolyTorus, + createPolyCone, +} from "@layoutit/polycss"; + +const host = document.getElementById("host")!; +const camera = createPolyOrthographicCamera({ rotX: 65, rotY: 45 }); +const scene = createPolyScene(host, { camera }); + +createPolyOrbitControls(scene); +scene.add(createPolyBox({ size: 80, color: "#4ecdc4" }), { position: [-120, 0, 0] }); +scene.add(createPolyTorus({ color: "#ff6644" }), { position: [0, 0, 0] }); +scene.add(createPolyCone({ color: "#ffd166" }), { position: [120, 0, 0] }); diff --git a/examples/vanilla/package.json b/examples/vanilla/package.json new file mode 100644 index 00000000..5a582e5b --- /dev/null +++ b/examples/vanilla/package.json @@ -0,0 +1,18 @@ +{ + "name": "@layoutit/polycss-examples-vanilla", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@layoutit/polycss": "workspace:^" + }, + "devDependencies": { + "typescript": "^5.3.3", + "vite": "^6.0.0" + } +} diff --git a/examples/vanilla/solid-glb/index.html b/examples/vanilla/solid-glb/index.html new file mode 100644 index 00000000..344ab744 --- /dev/null +++ b/examples/vanilla/solid-glb/index.html @@ -0,0 +1,16 @@ + + + + + + solid-glb — polycss vanilla + + + +
+ + + diff --git a/examples/vanilla/solid-glb/main.ts b/examples/vanilla/solid-glb/main.ts new file mode 100644 index 00000000..e8dfc71e --- /dev/null +++ b/examples/vanilla/solid-glb/main.ts @@ -0,0 +1,16 @@ +import { + createPolyPerspectiveCamera, + createPolyScene, + createPolyOrbitControls, + loadMesh, +} from "@layoutit/polycss"; + +const host = document.getElementById("host")!; +const camera = createPolyPerspectiveCamera({ rotX: 65, rotY: 45 }); +const scene = createPolyScene(host, { camera, autoCenter: true }); + +createPolyOrbitControls(scene, { animate: { speed: 0.3 } }); + +loadMesh("https://polycss.com/gallery/glb/apple.glb").then((result) => { + scene.add(result); +}); diff --git a/examples/vanilla/textured-glb/index.html b/examples/vanilla/textured-glb/index.html new file mode 100644 index 00000000..9169c84d --- /dev/null +++ b/examples/vanilla/textured-glb/index.html @@ -0,0 +1,16 @@ + + + + + + textured-glb — polycss vanilla + + + +
+ + + diff --git a/examples/vanilla/textured-glb/main.ts b/examples/vanilla/textured-glb/main.ts new file mode 100644 index 00000000..714b9697 --- /dev/null +++ b/examples/vanilla/textured-glb/main.ts @@ -0,0 +1,18 @@ +import { + createPolyPerspectiveCamera, + createPolyScene, + createPolyOrbitControls, + loadMesh, +} from "@layoutit/polycss"; + +const host = document.getElementById("host")!; +const camera = createPolyPerspectiveCamera({ rotX: 65, rotY: 45 }); +const scene = createPolyScene(host, { camera, autoCenter: true }); + +createPolyOrbitControls(scene); + +loadMesh("https://polycss.com/gallery/obj/cottage.obj", { + mtlUrl: "https://polycss.com/gallery/obj/cottage.mtl", +}).then((result) => { + scene.add(result); +}); diff --git a/examples/vanilla/tsconfig.json b/examples/vanilla/tsconfig.json new file mode 100644 index 00000000..18f54623 --- /dev/null +++ b/examples/vanilla/tsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "Bundler", + "strict": true, + "lib": ["ES2020", "DOM"] + }, + "include": ["**/*.ts"] +} diff --git a/examples/vanilla/vite.config.ts b/examples/vanilla/vite.config.ts new file mode 100644 index 00000000..c8362326 --- /dev/null +++ b/examples/vanilla/vite.config.ts @@ -0,0 +1,18 @@ +import { defineConfig } from "vite"; +import { resolve } from "path"; + +export default defineConfig({ + build: { + rollupOptions: { + input: { + main: resolve(__dirname, "index.html"), + "baked-shapes": resolve(__dirname, "baked-shapes/index.html"), + "multi-mesh": resolve(__dirname, "multi-mesh/index.html"), + "solid-glb": resolve(__dirname, "solid-glb/index.html"), + "textured-glb": resolve(__dirname, "textured-glb/index.html"), + animated: resolve(__dirname, "animated/index.html"), + voxel: resolve(__dirname, "voxel/index.html"), + }, + }, + }, +}); diff --git a/examples/vanilla/voxel/index.html b/examples/vanilla/voxel/index.html new file mode 100644 index 00000000..da9a1690 --- /dev/null +++ b/examples/vanilla/voxel/index.html @@ -0,0 +1,16 @@ + + + + + + voxel — polycss vanilla + + + +
+ + + diff --git a/examples/vanilla/voxel/main.ts b/examples/vanilla/voxel/main.ts new file mode 100644 index 00000000..b65f09d4 --- /dev/null +++ b/examples/vanilla/voxel/main.ts @@ -0,0 +1,16 @@ +import { + createPolyOrthographicCamera, + createPolyScene, + createPolyOrbitControls, + loadMesh, +} from "@layoutit/polycss"; + +const host = document.getElementById("host")!; +const camera = createPolyOrthographicCamera({ rotX: 65, rotY: 45 }); +const scene = createPolyScene(host, { camera, autoCenter: true }); + +createPolyOrbitControls(scene); + +loadMesh("https://polycss.com/gallery/vox/apple.vox").then((result) => { + scene.add(result); +}); From 895c7343638dd6ed39aaf80eef124f892797b155 Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Thu, 21 May 2026 02:12:18 +0200 Subject: [PATCH 004/107] feat(examples): add React examples app --- examples/react/animated/index.html | 13 ++++++ examples/react/animated/main.tsx | 63 ++++++++++++++++++++++++++ examples/react/baked-shapes/index.html | 13 ++++++ examples/react/baked-shapes/main.tsx | 20 ++++++++ examples/react/index.html | 27 +++++++++++ examples/react/multi-mesh/index.html | 13 ++++++ examples/react/multi-mesh/main.tsx | 24 ++++++++++ examples/react/package.json | 23 ++++++++++ examples/react/solid-glb/index.html | 13 ++++++ examples/react/solid-glb/main.tsx | 20 ++++++++ examples/react/textured-glb/index.html | 13 ++++++ examples/react/textured-glb/main.tsx | 24 ++++++++++ examples/react/tsconfig.json | 11 +++++ examples/react/vite.config.ts | 20 ++++++++ examples/react/voxel/index.html | 13 ++++++ examples/react/voxel/main.tsx | 20 ++++++++ 16 files changed, 330 insertions(+) create mode 100644 examples/react/animated/index.html create mode 100644 examples/react/animated/main.tsx create mode 100644 examples/react/baked-shapes/index.html create mode 100644 examples/react/baked-shapes/main.tsx create mode 100644 examples/react/index.html create mode 100644 examples/react/multi-mesh/index.html create mode 100644 examples/react/multi-mesh/main.tsx create mode 100644 examples/react/package.json create mode 100644 examples/react/solid-glb/index.html create mode 100644 examples/react/solid-glb/main.tsx create mode 100644 examples/react/textured-glb/index.html create mode 100644 examples/react/textured-glb/main.tsx create mode 100644 examples/react/tsconfig.json create mode 100644 examples/react/vite.config.ts create mode 100644 examples/react/voxel/index.html create mode 100644 examples/react/voxel/main.tsx diff --git a/examples/react/animated/index.html b/examples/react/animated/index.html new file mode 100644 index 00000000..bb88aa55 --- /dev/null +++ b/examples/react/animated/index.html @@ -0,0 +1,13 @@ + + + + + + animated — polycss React + + + +
+ + + diff --git a/examples/react/animated/main.tsx b/examples/react/animated/main.tsx new file mode 100644 index 00000000..934d57ba --- /dev/null +++ b/examples/react/animated/main.tsx @@ -0,0 +1,63 @@ +import { useEffect, useRef, useState } from "react"; +import { createRoot } from "react-dom/client"; +import { + PolyPerspectiveCamera, + PolyScene, + PolyOrbitControls, + PolyMesh, + usePolyAnimation, +} from "@layoutit/polycss-react"; +import { loadMesh } from "@layoutit/polycss-react"; +import type { ParseResult, PolyMeshHandle } from "@layoutit/polycss-react"; + +function AnimatedScene() { + const [parseResult, setParseResult] = useState(null); + const meshRef = useRef(null); + + useEffect(() => { + let disposed = false; + loadMesh("https://polycss.com/gallery/glb/AnimatedWizard.glb").then((result) => { + if (!disposed) setParseResult(result); + }); + return () => { + disposed = true; + parseResult?.dispose(); + }; + }, []); + + const { actions } = usePolyAnimation( + parseResult?.animation?.clips, + parseResult?.animation, + meshRef, + ); + + useEffect(() => { + if (parseResult?.animation?.clips[0]) { + actions[parseResult.animation.clips[0].name]?.play(); + } + }, [actions, parseResult]); + + if (!parseResult) return null; + + return ( + + ); +} + +function App() { + return ( + + + + + + + ); +} + +createRoot(document.getElementById("root")!).render(); diff --git a/examples/react/baked-shapes/index.html b/examples/react/baked-shapes/index.html new file mode 100644 index 00000000..5021bfe6 --- /dev/null +++ b/examples/react/baked-shapes/index.html @@ -0,0 +1,13 @@ + + + + + + baked-shapes — polycss React + + + +
+ + + diff --git a/examples/react/baked-shapes/main.tsx b/examples/react/baked-shapes/main.tsx new file mode 100644 index 00000000..25807f9e --- /dev/null +++ b/examples/react/baked-shapes/main.tsx @@ -0,0 +1,20 @@ +import { createRoot } from "react-dom/client"; +import { + PolyCamera, + PolyScene, + PolyOrbitControls, + PolyIcosahedron, +} from "@layoutit/polycss-react"; + +function App() { + return ( + + + + + + + ); +} + +createRoot(document.getElementById("root")!).render(); diff --git a/examples/react/index.html b/examples/react/index.html new file mode 100644 index 00000000..a3949ebc --- /dev/null +++ b/examples/react/index.html @@ -0,0 +1,27 @@ + + + + + + polycss — React examples + + + +

polycss — React examples

+ + + diff --git a/examples/react/multi-mesh/index.html b/examples/react/multi-mesh/index.html new file mode 100644 index 00000000..f01e852d --- /dev/null +++ b/examples/react/multi-mesh/index.html @@ -0,0 +1,13 @@ + + + + + + multi-mesh — polycss React + + + +
+ + + diff --git a/examples/react/multi-mesh/main.tsx b/examples/react/multi-mesh/main.tsx new file mode 100644 index 00000000..7c5b9a5d --- /dev/null +++ b/examples/react/multi-mesh/main.tsx @@ -0,0 +1,24 @@ +import { createRoot } from "react-dom/client"; +import { + PolyCamera, + PolyScene, + PolyOrbitControls, + PolyBox, + PolyTorus, + PolyCone, +} from "@layoutit/polycss-react"; + +function App() { + return ( + + + + + + + + + ); +} + +createRoot(document.getElementById("root")!).render(); diff --git a/examples/react/package.json b/examples/react/package.json new file mode 100644 index 00000000..1d127b9b --- /dev/null +++ b/examples/react/package.json @@ -0,0 +1,23 @@ +{ + "name": "@layoutit/polycss-examples-react", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@layoutit/polycss-react": "workspace:^", + "react": "^19.0.0", + "react-dom": "^19.0.0" + }, + "devDependencies": { + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "@vitejs/plugin-react": "^4.0.0", + "typescript": "^5.3.3", + "vite": "^6.0.0" + } +} diff --git a/examples/react/solid-glb/index.html b/examples/react/solid-glb/index.html new file mode 100644 index 00000000..b3e1e336 --- /dev/null +++ b/examples/react/solid-glb/index.html @@ -0,0 +1,13 @@ + + + + + + solid-glb — polycss React + + + +
+ + + diff --git a/examples/react/solid-glb/main.tsx b/examples/react/solid-glb/main.tsx new file mode 100644 index 00000000..d317ebe6 --- /dev/null +++ b/examples/react/solid-glb/main.tsx @@ -0,0 +1,20 @@ +import { createRoot } from "react-dom/client"; +import { + PolyPerspectiveCamera, + PolyScene, + PolyOrbitControls, + PolyMesh, +} from "@layoutit/polycss-react"; + +function App() { + return ( + + + + + + + ); +} + +createRoot(document.getElementById("root")!).render(); diff --git a/examples/react/textured-glb/index.html b/examples/react/textured-glb/index.html new file mode 100644 index 00000000..cd59b0f4 --- /dev/null +++ b/examples/react/textured-glb/index.html @@ -0,0 +1,13 @@ + + + + + + textured-glb — polycss React + + + +
+ + + diff --git a/examples/react/textured-glb/main.tsx b/examples/react/textured-glb/main.tsx new file mode 100644 index 00000000..f4e969f4 --- /dev/null +++ b/examples/react/textured-glb/main.tsx @@ -0,0 +1,24 @@ +import { createRoot } from "react-dom/client"; +import { + PolyPerspectiveCamera, + PolyScene, + PolyOrbitControls, + PolyMesh, +} from "@layoutit/polycss-react"; + +function App() { + return ( + + + + + + + ); +} + +createRoot(document.getElementById("root")!).render(); diff --git a/examples/react/tsconfig.json b/examples/react/tsconfig.json new file mode 100644 index 00000000..17df2e2f --- /dev/null +++ b/examples/react/tsconfig.json @@ -0,0 +1,11 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "Bundler", + "strict": true, + "jsx": "react-jsx", + "lib": ["ES2020", "DOM"] + }, + "include": ["**/*.ts", "**/*.tsx"] +} diff --git a/examples/react/vite.config.ts b/examples/react/vite.config.ts new file mode 100644 index 00000000..1d968b65 --- /dev/null +++ b/examples/react/vite.config.ts @@ -0,0 +1,20 @@ +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import { resolve } from "path"; + +export default defineConfig({ + plugins: [react()], + build: { + rollupOptions: { + input: { + main: resolve(__dirname, "index.html"), + "baked-shapes": resolve(__dirname, "baked-shapes/index.html"), + "multi-mesh": resolve(__dirname, "multi-mesh/index.html"), + "solid-glb": resolve(__dirname, "solid-glb/index.html"), + "textured-glb": resolve(__dirname, "textured-glb/index.html"), + animated: resolve(__dirname, "animated/index.html"), + voxel: resolve(__dirname, "voxel/index.html"), + }, + }, + }, +}); diff --git a/examples/react/voxel/index.html b/examples/react/voxel/index.html new file mode 100644 index 00000000..7cfdb3b9 --- /dev/null +++ b/examples/react/voxel/index.html @@ -0,0 +1,13 @@ + + + + + + voxel — polycss React + + + +
+ + + diff --git a/examples/react/voxel/main.tsx b/examples/react/voxel/main.tsx new file mode 100644 index 00000000..5f837e72 --- /dev/null +++ b/examples/react/voxel/main.tsx @@ -0,0 +1,20 @@ +import { createRoot } from "react-dom/client"; +import { + PolyCamera, + PolyScene, + PolyOrbitControls, + PolyMesh, +} from "@layoutit/polycss-react"; + +function App() { + return ( + + + + + + + ); +} + +createRoot(document.getElementById("root")!).render(); From a6e4a63e7d1fa93e05733ab4f7eb4e913cd04011 Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Thu, 21 May 2026 02:12:20 +0200 Subject: [PATCH 005/107] feat(examples): add Vue examples app --- examples/vue/animated/App.vue | 56 ++++++++++++++++++++++++++++ examples/vue/animated/index.html | 13 +++++++ examples/vue/animated/main.ts | 4 ++ examples/vue/baked-shapes/App.vue | 20 ++++++++++ examples/vue/baked-shapes/index.html | 13 +++++++ examples/vue/baked-shapes/main.ts | 4 ++ examples/vue/index.html | 27 ++++++++++++++ examples/vue/multi-mesh/App.vue | 22 +++++++++++ examples/vue/multi-mesh/index.html | 13 +++++++ examples/vue/multi-mesh/main.ts | 4 ++ examples/vue/package.json | 20 ++++++++++ examples/vue/solid-glb/App.vue | 20 ++++++++++ examples/vue/solid-glb/index.html | 13 +++++++ examples/vue/solid-glb/main.ts | 4 ++ examples/vue/textured-glb/App.vue | 24 ++++++++++++ examples/vue/textured-glb/index.html | 13 +++++++ examples/vue/textured-glb/main.ts | 4 ++ examples/vue/tsconfig.json | 10 +++++ examples/vue/vite.config.ts | 20 ++++++++++ examples/vue/voxel/App.vue | 20 ++++++++++ examples/vue/voxel/index.html | 13 +++++++ examples/vue/voxel/main.ts | 4 ++ 22 files changed, 341 insertions(+) create mode 100644 examples/vue/animated/App.vue create mode 100644 examples/vue/animated/index.html create mode 100644 examples/vue/animated/main.ts create mode 100644 examples/vue/baked-shapes/App.vue create mode 100644 examples/vue/baked-shapes/index.html create mode 100644 examples/vue/baked-shapes/main.ts create mode 100644 examples/vue/index.html create mode 100644 examples/vue/multi-mesh/App.vue create mode 100644 examples/vue/multi-mesh/index.html create mode 100644 examples/vue/multi-mesh/main.ts create mode 100644 examples/vue/package.json create mode 100644 examples/vue/solid-glb/App.vue create mode 100644 examples/vue/solid-glb/index.html create mode 100644 examples/vue/solid-glb/main.ts create mode 100644 examples/vue/textured-glb/App.vue create mode 100644 examples/vue/textured-glb/index.html create mode 100644 examples/vue/textured-glb/main.ts create mode 100644 examples/vue/tsconfig.json create mode 100644 examples/vue/vite.config.ts create mode 100644 examples/vue/voxel/App.vue create mode 100644 examples/vue/voxel/index.html create mode 100644 examples/vue/voxel/main.ts diff --git a/examples/vue/animated/App.vue b/examples/vue/animated/App.vue new file mode 100644 index 00000000..d5abd0fb --- /dev/null +++ b/examples/vue/animated/App.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/examples/vue/animated/index.html b/examples/vue/animated/index.html new file mode 100644 index 00000000..3a8759d4 --- /dev/null +++ b/examples/vue/animated/index.html @@ -0,0 +1,13 @@ + + + + + + animated — polycss Vue + + + +
+ + + diff --git a/examples/vue/animated/main.ts b/examples/vue/animated/main.ts new file mode 100644 index 00000000..b670de8b --- /dev/null +++ b/examples/vue/animated/main.ts @@ -0,0 +1,4 @@ +import { createApp } from "vue"; +import App from "./App.vue"; + +createApp(App).mount("#app"); diff --git a/examples/vue/baked-shapes/App.vue b/examples/vue/baked-shapes/App.vue new file mode 100644 index 00000000..d1759aa2 --- /dev/null +++ b/examples/vue/baked-shapes/App.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/examples/vue/baked-shapes/index.html b/examples/vue/baked-shapes/index.html new file mode 100644 index 00000000..950e0fa7 --- /dev/null +++ b/examples/vue/baked-shapes/index.html @@ -0,0 +1,13 @@ + + + + + + baked-shapes — polycss Vue + + + +
+ + + diff --git a/examples/vue/baked-shapes/main.ts b/examples/vue/baked-shapes/main.ts new file mode 100644 index 00000000..b670de8b --- /dev/null +++ b/examples/vue/baked-shapes/main.ts @@ -0,0 +1,4 @@ +import { createApp } from "vue"; +import App from "./App.vue"; + +createApp(App).mount("#app"); diff --git a/examples/vue/index.html b/examples/vue/index.html new file mode 100644 index 00000000..4a07226f --- /dev/null +++ b/examples/vue/index.html @@ -0,0 +1,27 @@ + + + + + + polycss — Vue examples + + + +

polycss — Vue examples

+ + + diff --git a/examples/vue/multi-mesh/App.vue b/examples/vue/multi-mesh/App.vue new file mode 100644 index 00000000..6d3ec469 --- /dev/null +++ b/examples/vue/multi-mesh/App.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/examples/vue/multi-mesh/index.html b/examples/vue/multi-mesh/index.html new file mode 100644 index 00000000..f3805e7e --- /dev/null +++ b/examples/vue/multi-mesh/index.html @@ -0,0 +1,13 @@ + + + + + + multi-mesh — polycss Vue + + + +
+ + + diff --git a/examples/vue/multi-mesh/main.ts b/examples/vue/multi-mesh/main.ts new file mode 100644 index 00000000..b670de8b --- /dev/null +++ b/examples/vue/multi-mesh/main.ts @@ -0,0 +1,4 @@ +import { createApp } from "vue"; +import App from "./App.vue"; + +createApp(App).mount("#app"); diff --git a/examples/vue/package.json b/examples/vue/package.json new file mode 100644 index 00000000..9ff3013f --- /dev/null +++ b/examples/vue/package.json @@ -0,0 +1,20 @@ +{ + "name": "@layoutit/polycss-examples-vue", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@layoutit/polycss-vue": "workspace:^", + "vue": "^3.5.12" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.0.0", + "typescript": "^5.3.3", + "vite": "^6.0.0" + } +} diff --git a/examples/vue/solid-glb/App.vue b/examples/vue/solid-glb/App.vue new file mode 100644 index 00000000..c8b7bc66 --- /dev/null +++ b/examples/vue/solid-glb/App.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/examples/vue/solid-glb/index.html b/examples/vue/solid-glb/index.html new file mode 100644 index 00000000..9b2720f3 --- /dev/null +++ b/examples/vue/solid-glb/index.html @@ -0,0 +1,13 @@ + + + + + + solid-glb — polycss Vue + + + +
+ + + diff --git a/examples/vue/solid-glb/main.ts b/examples/vue/solid-glb/main.ts new file mode 100644 index 00000000..b670de8b --- /dev/null +++ b/examples/vue/solid-glb/main.ts @@ -0,0 +1,4 @@ +import { createApp } from "vue"; +import App from "./App.vue"; + +createApp(App).mount("#app"); diff --git a/examples/vue/textured-glb/App.vue b/examples/vue/textured-glb/App.vue new file mode 100644 index 00000000..f888f90e --- /dev/null +++ b/examples/vue/textured-glb/App.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/examples/vue/textured-glb/index.html b/examples/vue/textured-glb/index.html new file mode 100644 index 00000000..7ce4ea41 --- /dev/null +++ b/examples/vue/textured-glb/index.html @@ -0,0 +1,13 @@ + + + + + + textured-glb — polycss Vue + + + +
+ + + diff --git a/examples/vue/textured-glb/main.ts b/examples/vue/textured-glb/main.ts new file mode 100644 index 00000000..b670de8b --- /dev/null +++ b/examples/vue/textured-glb/main.ts @@ -0,0 +1,4 @@ +import { createApp } from "vue"; +import App from "./App.vue"; + +createApp(App).mount("#app"); diff --git a/examples/vue/tsconfig.json b/examples/vue/tsconfig.json new file mode 100644 index 00000000..506c5712 --- /dev/null +++ b/examples/vue/tsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "Bundler", + "strict": true, + "lib": ["ES2020", "DOM"] + }, + "include": ["**/*.ts", "**/*.vue"] +} diff --git a/examples/vue/vite.config.ts b/examples/vue/vite.config.ts new file mode 100644 index 00000000..7fa998f3 --- /dev/null +++ b/examples/vue/vite.config.ts @@ -0,0 +1,20 @@ +import { defineConfig } from "vite"; +import vue from "@vitejs/plugin-vue"; +import { resolve } from "path"; + +export default defineConfig({ + plugins: [vue()], + build: { + rollupOptions: { + input: { + main: resolve(__dirname, "index.html"), + "baked-shapes": resolve(__dirname, "baked-shapes/index.html"), + "multi-mesh": resolve(__dirname, "multi-mesh/index.html"), + "solid-glb": resolve(__dirname, "solid-glb/index.html"), + "textured-glb": resolve(__dirname, "textured-glb/index.html"), + animated: resolve(__dirname, "animated/index.html"), + voxel: resolve(__dirname, "voxel/index.html"), + }, + }, + }, +}); diff --git a/examples/vue/voxel/App.vue b/examples/vue/voxel/App.vue new file mode 100644 index 00000000..c4075af1 --- /dev/null +++ b/examples/vue/voxel/App.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/examples/vue/voxel/index.html b/examples/vue/voxel/index.html new file mode 100644 index 00000000..65d356aa --- /dev/null +++ b/examples/vue/voxel/index.html @@ -0,0 +1,13 @@ + + + + + + voxel — polycss Vue + + + +
+ + + diff --git a/examples/vue/voxel/main.ts b/examples/vue/voxel/main.ts new file mode 100644 index 00000000..b670de8b --- /dev/null +++ b/examples/vue/voxel/main.ts @@ -0,0 +1,4 @@ +import { createApp } from "vue"; +import App from "./App.vue"; + +createApp(App).mount("#app"); From 5549bb80ab810be7aafaa309cbb9815732e05414 Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Thu, 21 May 2026 02:20:35 +0200 Subject: [PATCH 006/107] fix(polycss): set crossOrigin on texture image loader for cross-origin atlas rasterisation --- packages/polycss/src/render/textureAtlas.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/polycss/src/render/textureAtlas.ts b/packages/polycss/src/render/textureAtlas.ts index 54c7ffbf..fd09208b 100644 --- a/packages/polycss/src/render/textureAtlas.ts +++ b/packages/polycss/src/render/textureAtlas.ts @@ -363,6 +363,12 @@ function loadTextureImage(url: string): Promise { p = new Promise((resolve, reject) => { const img = new Image(); img.decoding = "async"; + // Request CORS so cross-origin textures can be drawn to the atlas canvas + // without tainting it (atlas rasterisation reads pixels via toBlob / + // getImageData). Same-origin loads ignore the attribute; cross-origin + // servers need `Access-Control-Allow-Origin` set, which is standard for + // public CDNs like esm.sh / polycss.com. + img.crossOrigin = "anonymous"; img.onload = () => resolve(img); img.onerror = () => reject(new Error(`texture load failed: ${url}`)); img.src = url; From 414d6cc867403201025f0e54b9128affa265b66b Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Thu, 21 May 2026 02:20:36 +0200 Subject: [PATCH 007/107] fix(examples-html): size poly-scene so .polycss-scene centers correctly --- examples/html/baked-shapes/index.html | 2 +- examples/html/multi-mesh/index.html | 2 +- examples/html/solid-glb/index.html | 2 +- examples/html/textured-glb/index.html | 2 +- examples/html/voxel/index.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/html/baked-shapes/index.html b/examples/html/baked-shapes/index.html index b8d316a4..a90302b1 100644 --- a/examples/html/baked-shapes/index.html +++ b/examples/html/baked-shapes/index.html @@ -6,7 +6,7 @@ baked-shapes — polycss HTML diff --git a/examples/html/multi-mesh/index.html b/examples/html/multi-mesh/index.html index 4192e2a2..67795caf 100644 --- a/examples/html/multi-mesh/index.html +++ b/examples/html/multi-mesh/index.html @@ -6,7 +6,7 @@ multi-mesh — polycss HTML diff --git a/examples/html/solid-glb/index.html b/examples/html/solid-glb/index.html index a4e81490..c9bce8ee 100644 --- a/examples/html/solid-glb/index.html +++ b/examples/html/solid-glb/index.html @@ -6,7 +6,7 @@ solid-glb — polycss HTML diff --git a/examples/html/textured-glb/index.html b/examples/html/textured-glb/index.html index 7c3bb502..3bc01278 100644 --- a/examples/html/textured-glb/index.html +++ b/examples/html/textured-glb/index.html @@ -6,7 +6,7 @@ textured-glb — polycss HTML diff --git a/examples/html/voxel/index.html b/examples/html/voxel/index.html index fdcd5e70..405c6c8d 100644 --- a/examples/html/voxel/index.html +++ b/examples/html/voxel/index.html @@ -6,7 +6,7 @@ voxel — polycss HTML From 1fc7062ef35877998d84974a1cbe9101b7fbbda4 Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Thu, 21 May 2026 02:24:00 +0200 Subject: [PATCH 008/107] fix(polycss): default .polycss-camera to fill parent so the scene centers --- packages/polycss/src/styles/styles.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/polycss/src/styles/styles.ts b/packages/polycss/src/styles/styles.ts index fc238cc3..d185485d 100644 --- a/packages/polycss/src/styles/styles.ts +++ b/packages/polycss/src/styles/styles.ts @@ -25,6 +25,18 @@ const CORE_BASE_STYLES = ` box-sizing: border-box; } +/* Camera wrapper (mounted by createPolyCamera / PolyPerspectiveCamera / + PolyOrthographicCamera). Fills its parent so the scene inside has a + positioned, sized layout context for its top: 50% / left: 50% pin to + resolve against. Inline styles win on specificity if the user sizes + the camera explicitly. */ +.polycss-camera { + position: relative; + display: block; + width: 100%; + height: 100%; +} + .polycss-scene { position: absolute; top: 50%; From 8d9d6a439cab6cfe2324eb74645fc99d9b73cbba Mon Sep 17 00:00:00 2001 From: Juan Cruz Fortunatti Date: Thu, 21 May 2026 02:31:04 +0200 Subject: [PATCH 009/107] fix(examples): set zoom: 0.3 on all example cameras --- examples/html/baked-shapes/index.html | 2 +- examples/html/multi-mesh/index.html | 2 +- examples/html/solid-glb/index.html | 2 +- examples/html/textured-glb/index.html | 2 +- examples/html/voxel/index.html | 2 +- examples/react/animated/main.tsx | 2 +- examples/react/baked-shapes/main.tsx | 2 +- examples/react/multi-mesh/main.tsx | 2 +- examples/react/solid-glb/main.tsx | 2 +- examples/react/textured-glb/main.tsx | 2 +- examples/react/voxel/main.tsx | 2 +- examples/vanilla/animated/main.ts | 2 +- examples/vanilla/baked-shapes/main.ts | 2 +- examples/vanilla/multi-mesh/main.ts | 2 +- examples/vanilla/solid-glb/main.ts | 2 +- examples/vanilla/textured-glb/main.ts | 2 +- examples/vanilla/voxel/main.ts | 2 +- examples/vue/animated/App.vue | 2 +- examples/vue/baked-shapes/App.vue | 2 +- examples/vue/multi-mesh/App.vue | 2 +- examples/vue/solid-glb/App.vue | 2 +- examples/vue/textured-glb/App.vue | 2 +- examples/vue/voxel/App.vue | 2 +- 23 files changed, 23 insertions(+), 23 deletions(-) diff --git a/examples/html/baked-shapes/index.html b/examples/html/baked-shapes/index.html index a90302b1..39738ea9 100644 --- a/examples/html/baked-shapes/index.html +++ b/examples/html/baked-shapes/index.html @@ -11,7 +11,7 @@ - + diff --git a/examples/html/multi-mesh/index.html b/examples/html/multi-mesh/index.html index 67795caf..11207e94 100644 --- a/examples/html/multi-mesh/index.html +++ b/examples/html/multi-mesh/index.html @@ -11,7 +11,7 @@ - + diff --git a/examples/html/solid-glb/index.html b/examples/html/solid-glb/index.html index c9bce8ee..352353aa 100644 --- a/examples/html/solid-glb/index.html +++ b/examples/html/solid-glb/index.html @@ -11,7 +11,7 @@ - + diff --git a/examples/html/textured-glb/index.html b/examples/html/textured-glb/index.html index 3bc01278..4f60664d 100644 --- a/examples/html/textured-glb/index.html +++ b/examples/html/textured-glb/index.html @@ -11,7 +11,7 @@ - + - + diff --git a/examples/react/animated/main.tsx b/examples/react/animated/main.tsx index 934d57ba..03e93ec7 100644 --- a/examples/react/animated/main.tsx +++ b/examples/react/animated/main.tsx @@ -51,7 +51,7 @@ function AnimatedScene() { function App() { return ( - + diff --git a/examples/react/baked-shapes/main.tsx b/examples/react/baked-shapes/main.tsx index 25807f9e..e65604ba 100644 --- a/examples/react/baked-shapes/main.tsx +++ b/examples/react/baked-shapes/main.tsx @@ -8,7 +8,7 @@ import { function App() { return ( - + diff --git a/examples/react/multi-mesh/main.tsx b/examples/react/multi-mesh/main.tsx index 7c5b9a5d..df536e85 100644 --- a/examples/react/multi-mesh/main.tsx +++ b/examples/react/multi-mesh/main.tsx @@ -10,7 +10,7 @@ import { function App() { return ( - + diff --git a/examples/react/solid-glb/main.tsx b/examples/react/solid-glb/main.tsx index d317ebe6..11160570 100644 --- a/examples/react/solid-glb/main.tsx +++ b/examples/react/solid-glb/main.tsx @@ -8,7 +8,7 @@ import { function App() { return ( - + diff --git a/examples/react/textured-glb/main.tsx b/examples/react/textured-glb/main.tsx index f4e969f4..10c76ed8 100644 --- a/examples/react/textured-glb/main.tsx +++ b/examples/react/textured-glb/main.tsx @@ -8,7 +8,7 @@ import { function App() { return ( - + + diff --git a/examples/vanilla/animated/main.ts b/examples/vanilla/animated/main.ts index 48d80e21..410f3b01 100644 --- a/examples/vanilla/animated/main.ts +++ b/examples/vanilla/animated/main.ts @@ -7,7 +7,7 @@ import { } from "@layoutit/polycss"; const host = document.getElementById("host")!; -const camera = createPolyPerspectiveCamera({ rotX: 65, rotY: 45 }); +const camera = createPolyPerspectiveCamera({ rotX: 65, rotY: 45, zoom: 0.3 }); const scene = createPolyScene(host, { camera, autoCenter: true }); createPolyOrbitControls(scene); diff --git a/examples/vanilla/baked-shapes/main.ts b/examples/vanilla/baked-shapes/main.ts index da6cdb81..478de41b 100644 --- a/examples/vanilla/baked-shapes/main.ts +++ b/examples/vanilla/baked-shapes/main.ts @@ -6,7 +6,7 @@ import { } from "@layoutit/polycss"; const host = document.getElementById("host")!; -const camera = createPolyOrthographicCamera({ rotX: 65, rotY: 45 }); +const camera = createPolyOrthographicCamera({ rotX: 65, rotY: 45, zoom: 0.3 }); const scene = createPolyScene(host, { camera }); createPolyOrbitControls(scene, { animate: { speed: 0.3 } }); diff --git a/examples/vanilla/multi-mesh/main.ts b/examples/vanilla/multi-mesh/main.ts index 7cce75b6..2159706f 100644 --- a/examples/vanilla/multi-mesh/main.ts +++ b/examples/vanilla/multi-mesh/main.ts @@ -8,7 +8,7 @@ import { } from "@layoutit/polycss"; const host = document.getElementById("host")!; -const camera = createPolyOrthographicCamera({ rotX: 65, rotY: 45 }); +const camera = createPolyOrthographicCamera({ rotX: 65, rotY: 45, zoom: 0.3 }); const scene = createPolyScene(host, { camera }); createPolyOrbitControls(scene); diff --git a/examples/vanilla/solid-glb/main.ts b/examples/vanilla/solid-glb/main.ts index e8dfc71e..12f5a8af 100644 --- a/examples/vanilla/solid-glb/main.ts +++ b/examples/vanilla/solid-glb/main.ts @@ -6,7 +6,7 @@ import { } from "@layoutit/polycss"; const host = document.getElementById("host")!; -const camera = createPolyPerspectiveCamera({ rotX: 65, rotY: 45 }); +const camera = createPolyPerspectiveCamera({ rotX: 65, rotY: 45, zoom: 0.3 }); const scene = createPolyScene(host, { camera, autoCenter: true }); createPolyOrbitControls(scene, { animate: { speed: 0.3 } }); diff --git a/examples/vanilla/textured-glb/main.ts b/examples/vanilla/textured-glb/main.ts index 714b9697..80d06544 100644 --- a/examples/vanilla/textured-glb/main.ts +++ b/examples/vanilla/textured-glb/main.ts @@ -6,7 +6,7 @@ import { } from "@layoutit/polycss"; const host = document.getElementById("host")!; -const camera = createPolyPerspectiveCamera({ rotX: 65, rotY: 45 }); +const camera = createPolyPerspectiveCamera({ rotX: 65, rotY: 45, zoom: 0.3 }); const scene = createPolyScene(host, { camera, autoCenter: true }); createPolyOrbitControls(scene); diff --git a/examples/vanilla/voxel/main.ts b/examples/vanilla/voxel/main.ts index b65f09d4..2ef1d9a9 100644 --- a/examples/vanilla/voxel/main.ts +++ b/examples/vanilla/voxel/main.ts @@ -6,7 +6,7 @@ import { } from "@layoutit/polycss"; const host = document.getElementById("host")!; -const camera = createPolyOrthographicCamera({ rotX: 65, rotY: 45 }); +const camera = createPolyOrthographicCamera({ rotX: 65, rotY: 45, zoom: 0.3 }); const scene = createPolyScene(host, { camera, autoCenter: true }); createPolyOrbitControls(scene); diff --git a/examples/vue/animated/App.vue b/examples/vue/animated/App.vue index d5abd0fb..f1fb6b5a 100644 --- a/examples/vue/animated/App.vue +++ b/examples/vue/animated/App.vue @@ -1,6 +1,6 @@