@layoutit/polycss 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +199 -0
- package/dist/PolySelectElement-DCuYJb5J.d.cts +367 -0
- package/dist/PolySelectElement-DCuYJb5J.d.ts +367 -0
- package/dist/elements.cjs +234 -0
- package/dist/elements.d.cts +30 -0
- package/dist/elements.d.ts +30 -0
- package/dist/elements.js +234 -0
- package/dist/index.cjs +234 -0
- package/dist/index.d.cts +220 -0
- package/dist/index.d.ts +220 -0
- package/dist/index.js +234 -0
- package/package.json +65 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Layoutit
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
> **Status: pre-1.0. APIs may still change before a stable 1.0 release.**
|
|
2
|
+
|
|
3
|
+
# polycss
|
|
4
|
+
|
|
5
|
+
Vanilla JS / custom elements package for CSS-based polygon mesh rendering. Loads OBJ, glTF, GLB, and MagicaVoxel `.vox` files; renders each polygon as a real DOM element (atlas-backed `<i>` for both textured and flat-color faces) positioned with `transform: matrix3d(...)`. No WebGL, no canvas-as-scene.
|
|
6
|
+
|
|
7
|
+
Two entry points:
|
|
8
|
+
|
|
9
|
+
- **`polycss`**: imperative `createPolyScene` API + custom element classes (without auto-registering them).
|
|
10
|
+
- **`polycss/elements`**: side-effect import that registers the scene, mesh, polygon, controls, camera, helper, select, and transform-control custom elements.
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @layoutit/polycss
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Or via CDN (no build step):
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<script type="module" src="https://esm.sh/@layoutit/polycss/elements"></script>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Custom elements (declarative, primary path)
|
|
25
|
+
|
|
26
|
+
Register elements with the side-effect import:
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<script type="module" src="https://esm.sh/@layoutit/polycss/elements"></script>
|
|
30
|
+
|
|
31
|
+
<poly-scene perspective="1000" rot-x="65" rot-y="45">
|
|
32
|
+
<poly-mesh src="/cottage.glb"></poly-mesh>
|
|
33
|
+
</poly-scene>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
With per-polygon elements:
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<poly-scene perspective="1000" rot-x="65" rot-y="45">
|
|
40
|
+
<poly-polygon
|
|
41
|
+
vertices="[[0,0,0],[1,0,0],[0,1,0]]"
|
|
42
|
+
color="#ff0000"
|
|
43
|
+
></poly-polygon>
|
|
44
|
+
<poly-polygon
|
|
45
|
+
vertices="[[2,0,0],[3,0,0],[2,1,0]]"
|
|
46
|
+
color="#0000ff"
|
|
47
|
+
></poly-polygon>
|
|
48
|
+
</poly-scene>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Custom elements accept standard DOM events: no framework needed:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<poly-scene id="scene" perspective="1000" rot-x="65" rot-y="45"></poly-scene>
|
|
55
|
+
|
|
56
|
+
<script type="module">
|
|
57
|
+
import "https://esm.sh/@layoutit/polycss/elements";
|
|
58
|
+
|
|
59
|
+
const scene = document.querySelector("#scene");
|
|
60
|
+
|
|
61
|
+
const polygons = [
|
|
62
|
+
{ vertices: [[0,0,0],[1,0,0],[0,1,0]], color: "#f00", id: "a" },
|
|
63
|
+
{ vertices: [[2,0,0],[3,0,0],[2,1,0]], color: "#00f", id: "b" },
|
|
64
|
+
];
|
|
65
|
+
|
|
66
|
+
polygons.forEach(p => {
|
|
67
|
+
const el = document.createElement("poly-polygon");
|
|
68
|
+
el.setAttribute("vertices", JSON.stringify(p.vertices));
|
|
69
|
+
el.setAttribute("color", p.color);
|
|
70
|
+
el.addEventListener("click", () => console.log("clicked", p.id));
|
|
71
|
+
el.addEventListener("mouseenter", () => el.classList.add("hover"));
|
|
72
|
+
el.addEventListener("mouseleave", () => el.classList.remove("hover"));
|
|
73
|
+
scene.appendChild(el);
|
|
74
|
+
});
|
|
75
|
+
</script>
|
|
76
|
+
|
|
77
|
+
<style>
|
|
78
|
+
poly-polygon.hover { filter: brightness(1.5); }
|
|
79
|
+
</style>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Custom element attributes
|
|
83
|
+
|
|
84
|
+
**`<poly-scene>`**
|
|
85
|
+
|
|
86
|
+
| Attribute | Description |
|
|
87
|
+
|---|---|
|
|
88
|
+
| `perspective` | CSS perspective distance in pixels |
|
|
89
|
+
| `rot-x` | Camera X-axis rotation in degrees |
|
|
90
|
+
| `rot-y` | Camera Y-axis rotation in degrees |
|
|
91
|
+
| `zoom` | Scale factor |
|
|
92
|
+
| `directional-direction` | Comma-separated `x, y, z` e.g. `"0.5, -0.7, 0.6"` |
|
|
93
|
+
| `directional-color` | Directional light color hex |
|
|
94
|
+
| `directional-intensity` | Directional light intensity |
|
|
95
|
+
| `ambient-intensity` | Ambient light intensity |
|
|
96
|
+
| `ambient-color` | Ambient light color hex |
|
|
97
|
+
| `texture-lighting` | `"baked"` or `"dynamic"` |
|
|
98
|
+
| `atlas-scale` | Raster scale for generated atlas pages; lower values reduce memory/detail |
|
|
99
|
+
|
|
100
|
+
For pointer drag, wheel zoom, and autorotate, drop a `<poly-orbit-controls>` child inside the scene (or wire `createPolyOrbitControls(scene, ...)` against the imperative API). For pan-first map-style input use `<poly-map-controls>` / `createPolyMapControls` instead. Mirrors Three.js's split between camera state (`<poly-scene>`) and camera input.
|
|
101
|
+
|
|
102
|
+
**`<poly-mesh>`**
|
|
103
|
+
|
|
104
|
+
| Attribute | Description |
|
|
105
|
+
|---|---|
|
|
106
|
+
| `src` | URL to `.obj`, `.glb`, `.gltf`, or `.vox` |
|
|
107
|
+
| `position` | Comma-separated `x, y, z` |
|
|
108
|
+
| `scale` | Uniform scale factor |
|
|
109
|
+
| `rotation` | Comma-separated euler degrees `x, y, z` |
|
|
110
|
+
| `auto-center` | Boolean: shift mesh bbox center to origin |
|
|
111
|
+
|
|
112
|
+
**`<poly-polygon>`**
|
|
113
|
+
|
|
114
|
+
| Attribute | Description |
|
|
115
|
+
|---|---|
|
|
116
|
+
| `vertices` | JSON array of `[x,y,z]` arrays |
|
|
117
|
+
| `color` | CSS color |
|
|
118
|
+
| `texture` | Image URL |
|
|
119
|
+
| `uvs` | JSON array of `[u,v]` pairs |
|
|
120
|
+
| `position` | Comma-separated `x, y, z` |
|
|
121
|
+
| `scale` | Uniform scale factor |
|
|
122
|
+
| `rotation` | Comma-separated euler degrees `x, y, z` |
|
|
123
|
+
|
|
124
|
+
## Imperative API (escape hatch)
|
|
125
|
+
|
|
126
|
+
For programmatic control without custom elements:
|
|
127
|
+
|
|
128
|
+
```js
|
|
129
|
+
import { createPolyScene, loadMesh } from "@layoutit/polycss";
|
|
130
|
+
|
|
131
|
+
const scene = createPolyScene(document.querySelector("#scene"), {
|
|
132
|
+
perspective: 1000,
|
|
133
|
+
rotX: 65,
|
|
134
|
+
rotY: 45,
|
|
135
|
+
directionalLight: { direction: [0.5, -0.7, 0.6] },
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
const mesh = await loadMesh("/cottage.glb", {
|
|
139
|
+
gltfOptions: { targetSize: 60 },
|
|
140
|
+
});
|
|
141
|
+
const handle = scene.add(mesh, { position: [0, 0, 0] });
|
|
142
|
+
|
|
143
|
+
// Later:
|
|
144
|
+
handle.setTransform({ position: [5, 0, 0] });
|
|
145
|
+
handle.remove();
|
|
146
|
+
mesh.dispose();
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Imperative API reference
|
|
150
|
+
|
|
151
|
+
**`createPolyScene(host, options)`**
|
|
152
|
+
|
|
153
|
+
| Option | Type | Description |
|
|
154
|
+
|---|---|---|
|
|
155
|
+
| `perspective` | `number` | CSS perspective distance |
|
|
156
|
+
| `rotX` | `number` | Camera X rotation in degrees |
|
|
157
|
+
| `rotY` | `number` | Camera Y rotation in degrees |
|
|
158
|
+
| `zoom` | `number` | Camera zoom scale |
|
|
159
|
+
| `distance` | `number` | Camera dolly pull-back in CSS pixels |
|
|
160
|
+
| `target` | `Vec3` | World-coordinate camera target |
|
|
161
|
+
| `directionalLight` | `PolyDirectionalLight` | Directional light config |
|
|
162
|
+
| `ambientLight` | `PolyAmbientLight` | Ambient light config |
|
|
163
|
+
| `textureLighting` | `"baked" \| "dynamic"` | Texture lighting mode |
|
|
164
|
+
| `atlasScale` | `number \| "auto"` | Raster scale for generated atlas pages |
|
|
165
|
+
| `autoCenter` | `boolean` | Rotate around the union bbox center of added meshes |
|
|
166
|
+
|
|
167
|
+
Returns a `PolySceneHandle`:
|
|
168
|
+
|
|
169
|
+
```ts
|
|
170
|
+
interface PolySceneHandle {
|
|
171
|
+
add(mesh: ParseResult, opts?: { position?: Vec3; scale?: number | Vec3; rotation?: Vec3 }): PolyMeshHandle;
|
|
172
|
+
setOptions(partial: Partial<PolySceneOptions>): void;
|
|
173
|
+
destroy(): void;
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
**`loadMesh(url, options?)`**
|
|
178
|
+
|
|
179
|
+
Fetches and parses a mesh by URL (dispatches by extension: `.obj`, `.glb`, `.gltf`, `.vox`). Returns `Promise<ParseResult>`.
|
|
180
|
+
|
|
181
|
+
## Subpath imports
|
|
182
|
+
|
|
183
|
+
| Import | Effect |
|
|
184
|
+
|---|---|
|
|
185
|
+
| `import { createPolyScene } from "@layoutit/polycss"` | Imperative API + custom element classes (no auto-registration) |
|
|
186
|
+
| `import "@layoutit/polycss/elements"` | Side-effect: registers the polycss custom elements |
|
|
187
|
+
|
|
188
|
+
## Re-exports from `@layoutit/polycss-core`
|
|
189
|
+
|
|
190
|
+
All `@layoutit/polycss-core` exports are re-exported from `@layoutit/polycss`, so vanilla users install one package:
|
|
191
|
+
|
|
192
|
+
```ts
|
|
193
|
+
import { parseObj, parseGltf, parseVox, loadMesh, normalizePolygons } from "@layoutit/polycss";
|
|
194
|
+
import type { Polygon, Vec3, ParseResult } from "@layoutit/polycss";
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
## Docs
|
|
198
|
+
|
|
199
|
+
Full documentation at [polycss.com](https://polycss.com).
|
|
@@ -0,0 +1,367 @@
|
|
|
1
|
+
import { Polygon, Vec3, ParseResult, PolyDirectionalLight, PolyAmbientLight, PolyTextureLightingMode, CameraHandle } from '@layoutit/polycss-core';
|
|
2
|
+
|
|
3
|
+
type AtlasScale = number | "auto";
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* createPolyScene — imperative scene API. The vanilla counterpart to
|
|
7
|
+
* `<PolyScene>` in React / Vue.
|
|
8
|
+
*
|
|
9
|
+
* Per §API freeze: takes a host element + scene options, returns a
|
|
10
|
+
* `PolySceneHandle` whose `add(parseResult, transform?)` mounts a mesh under
|
|
11
|
+
* the scene root and returns a removable `PolyMeshHandle`.
|
|
12
|
+
*
|
|
13
|
+
* Implementation:
|
|
14
|
+
* - Inserts a `<div class="polycss-scene">` into the host.
|
|
15
|
+
* - Each `add(...)` creates a `<div class="polycss-mesh">` with the
|
|
16
|
+
* mesh transform; mounts every valid polygon as an atlas-backed
|
|
17
|
+
* background sprite.
|
|
18
|
+
* - `destroy()` removes the scene element and disposes every mesh
|
|
19
|
+
* (which in turn disposes generated atlas blob URLs).
|
|
20
|
+
*
|
|
21
|
+
* The scene element is a 0×0 anchor at world (0,0,0) — pinned via
|
|
22
|
+
* top:50%/left:50% so it sits at the visible center of the host. This
|
|
23
|
+
* matches React/Vue's PolyScene anchor pattern. Polygons render around
|
|
24
|
+
* the anchor via their own matrix3d translations.
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
interface PolySceneOptions {
|
|
28
|
+
perspective?: number | false;
|
|
29
|
+
rotX?: number;
|
|
30
|
+
rotY?: number;
|
|
31
|
+
zoom?: number;
|
|
32
|
+
/**
|
|
33
|
+
* Camera pull-back distance in CSS pixels. Increasing distance moves the
|
|
34
|
+
* camera farther from the target (scene appears smaller), applied as an
|
|
35
|
+
* outermost `translateZ(-distance)` in the scene transform. Matches the
|
|
36
|
+
* `distance` field in core's `CameraState`. Default: 0 (no dolly offset).
|
|
37
|
+
*/
|
|
38
|
+
distance?: number;
|
|
39
|
+
/**
|
|
40
|
+
* World-coordinate camera target — the world point that appears at the
|
|
41
|
+
* viewport centre. Matches React's `CameraState.target`. Defaults to
|
|
42
|
+
* `[0, 0, 0]` so existing scenes that don't set it keep working.
|
|
43
|
+
*
|
|
44
|
+
* Internally encoded as the innermost translate in the scene transform:
|
|
45
|
+
* `scale(zoom) rotateX(rotX) rotate(rotY) translate3d(-ty*tile, -tx*tile, -tz*tile)`
|
|
46
|
+
* (world→CSS axis swap: world-X→CSS-Y, world-Y→CSS-X, world-Z→CSS-Z).
|
|
47
|
+
*/
|
|
48
|
+
target?: Vec3;
|
|
49
|
+
directionalLight?: PolyDirectionalLight;
|
|
50
|
+
ambientLight?: PolyAmbientLight;
|
|
51
|
+
/** Textured polygon lighting mode. Defaults to "baked". */
|
|
52
|
+
textureLighting?: PolyTextureLightingMode;
|
|
53
|
+
/** Raster scale for generated atlas pages. `"auto"` reduces large atlases. */
|
|
54
|
+
atlasScale?: AtlasScale;
|
|
55
|
+
/**
|
|
56
|
+
* When `true`, rotation pivots around the union bbox of all added meshes
|
|
57
|
+
* instead of world (0,0,0). The scene wraps polygons in an inner div
|
|
58
|
+
* translated by `-bboxCenter`. Updates whenever a mesh is added/removed
|
|
59
|
+
* or `setOptions` is called. Mirrors React's `<PolyScene autoCenter>`.
|
|
60
|
+
*/
|
|
61
|
+
autoCenter?: boolean;
|
|
62
|
+
}
|
|
63
|
+
interface PolyMeshTransform {
|
|
64
|
+
/** Stable identifier — exposed on the handle and reflected on the
|
|
65
|
+
* wrapper as `data-poly-mesh-id`. Used by selection helpers to
|
|
66
|
+
* resolve clicks back to the mesh and to dedupe selection state. */
|
|
67
|
+
id?: string;
|
|
68
|
+
position?: Vec3;
|
|
69
|
+
scale?: number | Vec3;
|
|
70
|
+
rotation?: Vec3;
|
|
71
|
+
/**
|
|
72
|
+
* Whether `scene.add()` should merge coplanar polygons before rendering.
|
|
73
|
+
* Defaults to `true`. Set `false` for animated/deforming meshes whose
|
|
74
|
+
* triangle topology must remain stable from frame to frame.
|
|
75
|
+
*/
|
|
76
|
+
merge?: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* Keep polygon leaf DOM nodes stable across setPolygons() calls when the
|
|
79
|
+
* mesh topology is unchanged. Intended for animated/deforming meshes.
|
|
80
|
+
*/
|
|
81
|
+
stableDom?: boolean;
|
|
82
|
+
/**
|
|
83
|
+
* When `true`, this mesh's polygons are NOT included in the scene's
|
|
84
|
+
* auto-center bbox. Use for debug overlays / helpers that shouldn't
|
|
85
|
+
* shift the camera target when toggled. Defaults to `false`.
|
|
86
|
+
*/
|
|
87
|
+
excludeFromAutoCenter?: boolean;
|
|
88
|
+
}
|
|
89
|
+
interface PolyMeshHandle {
|
|
90
|
+
/** The polygons that were loaded after normalization and automatic merge. */
|
|
91
|
+
polygons: Polygon[];
|
|
92
|
+
/** The `.polycss-mesh` wrapper div for this mesh. Exposed so layered
|
|
93
|
+
* helpers (selection, transform controls) can resolve a click target
|
|
94
|
+
* back to its owning mesh, attach event listeners, or measure the
|
|
95
|
+
* mesh's screen position via `getBoundingClientRect`. */
|
|
96
|
+
readonly element: HTMLElement;
|
|
97
|
+
/** Identifier passed via `PolyMeshTransform.id` (if any). Reflected on
|
|
98
|
+
* the wrapper as `data-poly-mesh-id`. */
|
|
99
|
+
readonly id?: string;
|
|
100
|
+
/** Current transform snapshot (position / rotation / scale). Returned
|
|
101
|
+
* by reference — treat as read-only and use `setTransform` to
|
|
102
|
+
* mutate. */
|
|
103
|
+
readonly transform: PolyMeshTransform;
|
|
104
|
+
/** Remove the mesh from the scene. */
|
|
105
|
+
remove(): void;
|
|
106
|
+
/** Replace polygon geometry without tearing down the scene or controls. */
|
|
107
|
+
setPolygons(polygons: Polygon[], options?: {
|
|
108
|
+
merge?: boolean;
|
|
109
|
+
stableDom?: boolean;
|
|
110
|
+
recomputeAutoCenter?: boolean;
|
|
111
|
+
}): void;
|
|
112
|
+
/** Update transform without re-parsing. */
|
|
113
|
+
setTransform(t: Partial<PolyMeshTransform>): void;
|
|
114
|
+
/** Revoke any blob URLs the parse created. Idempotent. */
|
|
115
|
+
dispose(): void;
|
|
116
|
+
/**
|
|
117
|
+
* Re-rasterize the atlas using the directional light inverse-rotated into
|
|
118
|
+
* the mesh's local frame. Call this after a mesh rotation has been
|
|
119
|
+
* committed (e.g., on pointer release in rotate-mode transform controls) to
|
|
120
|
+
* correct stale baked shading.
|
|
121
|
+
*
|
|
122
|
+
* **Background:** Baked atlas tiles encode `baseColor × Lambert(worldNormal,
|
|
123
|
+
* worldLight)`. When the mesh wrapper rotates via CSS, the polygon's normal
|
|
124
|
+
* in world space changes but the baked color doesn't — faces stay lit/unlit
|
|
125
|
+
* incorrectly. `rebakeAtlas()` inverse-rotates the world light into the
|
|
126
|
+
* mesh's local frame and re-runs the rasterizer; because
|
|
127
|
+
* `dot(localNormal, localLight) === dot(worldNormal, worldLight)` the
|
|
128
|
+
* output is correct for any rotation.
|
|
129
|
+
*
|
|
130
|
+
* **Performance note:** This does NOT run on every `setTransform` call —
|
|
131
|
+
* only when explicitly invoked, so dragging remains smooth. Call it on
|
|
132
|
+
* pointer release (or any point where you want to commit the new shading).
|
|
133
|
+
*/
|
|
134
|
+
rebakeAtlas(): void;
|
|
135
|
+
/** Current `position` from the transform (matches framework API). */
|
|
136
|
+
getPosition(): Vec3 | undefined;
|
|
137
|
+
/** Current `rotation` from the transform (matches framework API). */
|
|
138
|
+
getRotation(): Vec3 | undefined;
|
|
139
|
+
/** Current `scale` from the transform (matches framework API). */
|
|
140
|
+
getScale(): number | Vec3 | undefined;
|
|
141
|
+
/** Polygons currently being rendered (matches framework API). */
|
|
142
|
+
getPolygons(): Polygon[];
|
|
143
|
+
}
|
|
144
|
+
interface PolySceneHandle {
|
|
145
|
+
/** Add a mesh to the scene. Returns a handle for later removal. */
|
|
146
|
+
add(mesh: ParseResult, opts?: PolyMeshTransform): PolyMeshHandle;
|
|
147
|
+
/** Update scene-level config (rotation, lighting, etc.). */
|
|
148
|
+
setOptions(partial: Partial<PolySceneOptions>): void;
|
|
149
|
+
/** Tear down the scene; revokes all blob URLs of registered meshes. */
|
|
150
|
+
destroy(): void;
|
|
151
|
+
/**
|
|
152
|
+
* The host element passed to `createPolyScene`. Exposed for layered
|
|
153
|
+
* helpers like `createPolyOrbitControls` that need to attach event listeners
|
|
154
|
+
* without tracking the host separately.
|
|
155
|
+
*/
|
|
156
|
+
readonly host: HTMLElement;
|
|
157
|
+
/**
|
|
158
|
+
* Snapshot of the current options (camera, lighting, merge, autoCenter,
|
|
159
|
+
* textureLighting, atlasScale, perspective). Returned by reference, so
|
|
160
|
+
* callers must treat it as read-only — mutations won't propagate. Used
|
|
161
|
+
* by helpers that need to read the current camera state without
|
|
162
|
+
* duplicating it.
|
|
163
|
+
*/
|
|
164
|
+
getOptions(): Readonly<PolySceneOptions>;
|
|
165
|
+
/** Snapshot of mesh handles currently in the scene (insertion order).
|
|
166
|
+
* Used by selection helpers to enumerate hit-test candidates. */
|
|
167
|
+
meshes(): readonly PolyMeshHandle[];
|
|
168
|
+
/** Resolve a `.polycss-mesh` element back to its handle, or `null` if
|
|
169
|
+
* the element doesn't belong to this scene. */
|
|
170
|
+
findMeshByElement(element: Element | null): PolyMeshHandle | null;
|
|
171
|
+
}
|
|
172
|
+
declare function createPolyScene(host: HTMLElement, options?: PolySceneOptions): PolySceneHandle;
|
|
173
|
+
|
|
174
|
+
interface PolyCameraOptions {
|
|
175
|
+
zoom?: number;
|
|
176
|
+
target?: Vec3;
|
|
177
|
+
rotX?: number;
|
|
178
|
+
rotY?: number;
|
|
179
|
+
/** Camera pull-back in CSS pixels (dolly). Default 0. */
|
|
180
|
+
distance?: number;
|
|
181
|
+
}
|
|
182
|
+
interface PolyPerspectiveCameraOptions extends PolyCameraOptions {
|
|
183
|
+
/** CSS perspective distance in pixels. Default 8000. */
|
|
184
|
+
perspective?: number;
|
|
185
|
+
}
|
|
186
|
+
interface PolyOrthographicCameraOptions extends PolyCameraOptions {
|
|
187
|
+
}
|
|
188
|
+
/** Extends CameraHandle with projection info for the container element. */
|
|
189
|
+
interface PolyPerspectiveCameraHandle extends CameraHandle {
|
|
190
|
+
readonly type: "perspective";
|
|
191
|
+
/** CSS `perspective` value to set on the camera container element. */
|
|
192
|
+
readonly perspectiveStyle: string;
|
|
193
|
+
}
|
|
194
|
+
interface PolyOrthographicCameraHandle extends CameraHandle {
|
|
195
|
+
readonly type: "orthographic";
|
|
196
|
+
/** CSS `perspective` value to set on the camera container element ("none"). */
|
|
197
|
+
readonly perspectiveStyle: "none";
|
|
198
|
+
}
|
|
199
|
+
/**
|
|
200
|
+
* Creates a perspective camera handle. The `perspectiveStyle` property
|
|
201
|
+
* returns the CSS value to apply to the camera container's `perspective`
|
|
202
|
+
* property (default `"8000px"`).
|
|
203
|
+
*/
|
|
204
|
+
declare function createPolyPerspectiveCamera(options?: PolyPerspectiveCameraOptions): PolyPerspectiveCameraHandle;
|
|
205
|
+
/**
|
|
206
|
+
* Creates an orthographic camera handle. The `perspectiveStyle` property
|
|
207
|
+
* returns `"none"` — pass it to the container element's CSS `perspective`
|
|
208
|
+
* to disable perspective projection.
|
|
209
|
+
*/
|
|
210
|
+
declare function createPolyOrthographicCamera(options?: PolyOrthographicCameraOptions): PolyOrthographicCameraHandle;
|
|
211
|
+
|
|
212
|
+
declare const ELEMENT_BASE$8: typeof HTMLElement;
|
|
213
|
+
declare class PolySceneElement extends ELEMENT_BASE$8 {
|
|
214
|
+
static get observedAttributes(): string[];
|
|
215
|
+
private _scene;
|
|
216
|
+
/**
|
|
217
|
+
* Returns the underlying PolySceneHandle. Children call this during their own
|
|
218
|
+
* connectedCallback to register meshes.
|
|
219
|
+
*/
|
|
220
|
+
getScene(): PolySceneHandle | null;
|
|
221
|
+
private _readOptions;
|
|
222
|
+
private _readDirectionalLight;
|
|
223
|
+
private _readAmbientLight;
|
|
224
|
+
connectedCallback(): void;
|
|
225
|
+
disconnectedCallback(): void;
|
|
226
|
+
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
declare const ELEMENT_BASE$7: typeof HTMLElement;
|
|
230
|
+
declare class PolyMeshElement extends ELEMENT_BASE$7 {
|
|
231
|
+
static get observedAttributes(): string[];
|
|
232
|
+
private _handle;
|
|
233
|
+
private _parseResult;
|
|
234
|
+
private _loadToken;
|
|
235
|
+
/** Returns the current mesh handle, or null if not yet loaded. */
|
|
236
|
+
getMeshHandle(): PolyMeshHandle | null;
|
|
237
|
+
connectedCallback(): void;
|
|
238
|
+
disconnectedCallback(): void;
|
|
239
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
240
|
+
private _tearDown;
|
|
241
|
+
private _maybeLoad;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
declare const ELEMENT_BASE$6: typeof HTMLElement;
|
|
245
|
+
declare class PolyPolygonElement extends ELEMENT_BASE$6 {
|
|
246
|
+
static get observedAttributes(): string[];
|
|
247
|
+
private _handle;
|
|
248
|
+
connectedCallback(): void;
|
|
249
|
+
disconnectedCallback(): void;
|
|
250
|
+
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
|
|
251
|
+
private _tearDown;
|
|
252
|
+
private _mount;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
declare const ELEMENT_BASE$5: typeof HTMLElement;
|
|
256
|
+
declare class PolyOrbitControlsElement extends ELEMENT_BASE$5 {
|
|
257
|
+
static get observedAttributes(): string[];
|
|
258
|
+
private _controls;
|
|
259
|
+
private _readAnimate;
|
|
260
|
+
private _readOptions;
|
|
261
|
+
private _findScene;
|
|
262
|
+
private _attach;
|
|
263
|
+
connectedCallback(): void;
|
|
264
|
+
disconnectedCallback(): void;
|
|
265
|
+
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
declare const ELEMENT_BASE$4: typeof HTMLElement;
|
|
269
|
+
declare class PolyMapControlsElement extends ELEMENT_BASE$4 {
|
|
270
|
+
static get observedAttributes(): string[];
|
|
271
|
+
private _controls;
|
|
272
|
+
private _readAnimate;
|
|
273
|
+
private _readOptions;
|
|
274
|
+
private _findScene;
|
|
275
|
+
private _attach;
|
|
276
|
+
connectedCallback(): void;
|
|
277
|
+
disconnectedCallback(): void;
|
|
278
|
+
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* <poly-perspective-camera> — standalone perspective camera element.
|
|
283
|
+
*
|
|
284
|
+
* Wraps `createPolyPerspectiveCamera`. Unlike <poly-scene> which owns the
|
|
285
|
+
* scene DOM, this element provides a camera context that child controls can
|
|
286
|
+
* read. It creates a `<div class="polycss-camera">` wrapper with the
|
|
287
|
+
* CSS `perspective` property set.
|
|
288
|
+
*
|
|
289
|
+
* Attributes (all optional):
|
|
290
|
+
* perspective — number, CSS perspective in pixels (default 8000)
|
|
291
|
+
* zoom — number
|
|
292
|
+
* rot-x — number, degrees (default 65)
|
|
293
|
+
* rot-y — number, degrees (default 45)
|
|
294
|
+
* target — "x,y,z" comma-separated world coordinates
|
|
295
|
+
* distance — number, camera pull-back in CSS pixels
|
|
296
|
+
*/
|
|
297
|
+
|
|
298
|
+
declare const ELEMENT_BASE$3: typeof HTMLElement;
|
|
299
|
+
declare class PolyPerspectiveCameraElement extends ELEMENT_BASE$3 {
|
|
300
|
+
static get observedAttributes(): string[];
|
|
301
|
+
private _camera;
|
|
302
|
+
private _wrapper;
|
|
303
|
+
/** Returns the camera handle, or null if not yet connected. */
|
|
304
|
+
getCamera(): PolyPerspectiveCameraHandle | null;
|
|
305
|
+
private _readOptions;
|
|
306
|
+
private _mount;
|
|
307
|
+
private _teardown;
|
|
308
|
+
connectedCallback(): void;
|
|
309
|
+
disconnectedCallback(): void;
|
|
310
|
+
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
/**
|
|
314
|
+
* <poly-orthographic-camera> — standalone orthographic camera element.
|
|
315
|
+
*
|
|
316
|
+
* Wraps `createPolyOrthographicCamera`. Sets CSS `perspective: none` on the
|
|
317
|
+
* camera wrapper, disabling perspective projection.
|
|
318
|
+
*
|
|
319
|
+
* Attributes (all optional):
|
|
320
|
+
* zoom — number
|
|
321
|
+
* rot-x — number, degrees (default 65)
|
|
322
|
+
* rot-y — number, degrees (default 45)
|
|
323
|
+
* target — "x,y,z" comma-separated world coordinates
|
|
324
|
+
* distance — number, camera pull-back in CSS pixels
|
|
325
|
+
*/
|
|
326
|
+
|
|
327
|
+
declare const ELEMENT_BASE$2: typeof HTMLElement;
|
|
328
|
+
declare class PolyOrthographicCameraElement extends ELEMENT_BASE$2 {
|
|
329
|
+
static get observedAttributes(): string[];
|
|
330
|
+
private _camera;
|
|
331
|
+
private _wrapper;
|
|
332
|
+
/** Returns the camera handle, or null if not yet connected. */
|
|
333
|
+
getCamera(): PolyOrthographicCameraHandle | null;
|
|
334
|
+
private _readOptions;
|
|
335
|
+
private _mount;
|
|
336
|
+
private _teardown;
|
|
337
|
+
connectedCallback(): void;
|
|
338
|
+
disconnectedCallback(): void;
|
|
339
|
+
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
declare const ELEMENT_BASE$1: typeof HTMLElement;
|
|
343
|
+
declare class PolyTransformControlsElement extends ELEMENT_BASE$1 {
|
|
344
|
+
static get observedAttributes(): string[];
|
|
345
|
+
private _tc;
|
|
346
|
+
private _findScene;
|
|
347
|
+
private _findTargetMesh;
|
|
348
|
+
private _readOptions;
|
|
349
|
+
private _attach;
|
|
350
|
+
connectedCallback(): void;
|
|
351
|
+
disconnectedCallback(): void;
|
|
352
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
declare const ELEMENT_BASE: typeof HTMLElement;
|
|
356
|
+
declare class PolySelectElement extends ELEMENT_BASE {
|
|
357
|
+
static get observedAttributes(): string[];
|
|
358
|
+
private _selection;
|
|
359
|
+
private _findScene;
|
|
360
|
+
private _readOptions;
|
|
361
|
+
private _attach;
|
|
362
|
+
connectedCallback(): void;
|
|
363
|
+
disconnectedCallback(): void;
|
|
364
|
+
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
export { type PolySceneHandle as P, type PolyMeshHandle as a, type PolyCameraOptions as b, PolyMapControlsElement as c, PolyMeshElement as d, type PolyMeshTransform as e, PolyOrbitControlsElement as f, PolyOrthographicCameraElement as g, type PolyOrthographicCameraHandle as h, type PolyOrthographicCameraOptions as i, PolyPerspectiveCameraElement as j, type PolyPerspectiveCameraHandle as k, type PolyPerspectiveCameraOptions as l, PolyPolygonElement as m, PolySceneElement as n, type PolySceneOptions as o, PolySelectElement as p, PolyTransformControlsElement as q, createPolyOrthographicCamera as r, createPolyPerspectiveCamera as s, createPolyScene as t };
|