@layoutit/polycss 0.2.1 → 0.2.2
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/README.md +16 -13
- package/dist/{PolyShapeElements-prI_DBZX.d.cts → PolyShapeElements-BNHvErQF.d.cts} +136 -31
- package/dist/{PolyShapeElements-prI_DBZX.d.ts → PolyShapeElements-BNHvErQF.d.ts} +136 -31
- package/dist/elements.cjs +128 -53
- package/dist/elements.d.cts +1 -1
- package/dist/elements.d.ts +1 -1
- package/dist/elements.js +128 -53
- package/dist/index.cjs +407 -52
- package/dist/index.d.cts +34 -94
- package/dist/index.d.ts +34 -94
- package/dist/index.js +407 -52
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# PolyCSS
|
|
2
2
|
|
|
3
|
-
A CSS polygon mesh library. A 3D engine for the DOM. Renders OBJ/MTL, GLB and VOX as real HTML elements transformed with CSS `matrix3d(...)`. Supports colors, textures, lighting, shadows, shapes and animations. Works with React, Vue or plain JavaScript.
|
|
3
|
+
A CSS polygon mesh library. A 3D engine for the DOM. Renders OBJ/MTL, STL, glTF/GLB, and VOX as real HTML elements transformed with CSS `matrix3d(...)`. Supports colors, textures, lighting, shadows, shapes and animations. Works with React, Vue or plain JavaScript.
|
|
4
4
|
|
|
5
5
|
Visit [polycss.com](https://polycss.com) for docs and model examples.
|
|
6
6
|
|
|
@@ -72,7 +72,6 @@ export default function App() {
|
|
|
72
72
|
- `directionalLight` and `ambientLight` control scene lighting.
|
|
73
73
|
- `textureLighting` chooses `"baked"` or `"dynamic"`.
|
|
74
74
|
- `textureQuality` controls atlas raster budget.
|
|
75
|
-
- Solid seam bleed is automatic on detected shared solid edges.
|
|
76
75
|
- `strategies` can disable selected render strategies for diagnostics.
|
|
77
76
|
- `autoCenter` rotates around the rendered mesh bounds instead of world origin.
|
|
78
77
|
|
|
@@ -83,7 +82,7 @@ export default function App() {
|
|
|
83
82
|
- `polygons` accepts pre-parsed geometry.
|
|
84
83
|
- `position`, `scale`, and `rotation` transform the mesh wrapper.
|
|
85
84
|
- `autoCenter` shifts the mesh bbox center to local origin.
|
|
86
|
-
- `meshResolution` chooses `"lossy"` (default) or `"lossless"` optimization.
|
|
85
|
+
- `meshResolution` chooses `"lossy"` (default) or `"lossless"` optimization. STL imports use the conservative lossless path in both modes.
|
|
87
86
|
- `castShadow` emits CSS-projected shadows in dynamic lighting mode.
|
|
88
87
|
|
|
89
88
|
### Controls
|
|
@@ -93,6 +92,18 @@ export default function App() {
|
|
|
93
92
|
- `<PolyFirstPersonControls>` provides keyboard and pointer-look navigation.
|
|
94
93
|
- `<PolyTransformControls>` adds translate/rotate gizmos for selected mesh handles.
|
|
95
94
|
|
|
95
|
+
### Snapshot Export
|
|
96
|
+
|
|
97
|
+
The vanilla package exports `exportPolySceneSnapshot(target)`. It clones the current rendered `.polycss-camera` / `.polycss-scene` DOM, injects only the PolyCSS CSS needed by that snapshot, inlines CSS `url(...)` image assets as `data:image/...;base64,...`, strips scripts and inline event handlers, and returns a standalone HTML document string with no PolyCSS runtime import. It works with rendered React/Vue scenes too; import it from `@layoutit/polycss` and pass the rendered camera or scene element.
|
|
98
|
+
|
|
99
|
+
```ts
|
|
100
|
+
import { exportPolySceneSnapshot } from "@layoutit/polycss";
|
|
101
|
+
|
|
102
|
+
const html = await exportPolySceneSnapshot(scene.host);
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
If any referenced asset cannot be inlined, the function throws `PolySceneSnapshotError` with `code: "ASSET_INLINE_FAILED"`.
|
|
106
|
+
|
|
96
107
|
### Polygon Data Model
|
|
97
108
|
|
|
98
109
|
Each polygon describes one renderable face:
|
|
@@ -149,22 +160,14 @@ scene.add(mesh);
|
|
|
149
160
|
Supported formats:
|
|
150
161
|
|
|
151
162
|
- OBJ + MTL, including `map_Kd` textures and UV coordinates.
|
|
163
|
+
- STL triangle meshes, including binary Magics face colors. STL has no standard units, textures, UVs, or hierarchy, so imports skip lossy simplification and ray-based interior culling.
|
|
152
164
|
- glTF / GLB, including embedded images and `TEXCOORD_0`.
|
|
153
165
|
- MagicaVoxel `.vox`, with direct voxel fast paths when eligible.
|
|
154
166
|
- Generated primitives: box, plane, ring, sphere, torus, cylinder, cone, and Platonic solids.
|
|
155
167
|
|
|
156
168
|
## Performance
|
|
157
169
|
|
|
158
|
-
PolyCSS renders
|
|
159
|
-
|
|
160
|
-
- One visible polygon becomes one leaf DOM element.
|
|
161
|
-
- Flat rectangles and stable quads use solid CSS leaves.
|
|
162
|
-
- Textured polygons are packed into generated texture atlases.
|
|
163
|
-
- Dynamic lighting runs through CSS custom properties instead of per-frame JavaScript.
|
|
164
|
-
- Voxel-shaped meshes mount only camera-facing leaves when the mesh is eligible.
|
|
165
|
-
- `meshResolution: "lossy"` merges compatible polygons, then may spend a small split budget to repair high-risk seams.
|
|
166
|
-
|
|
167
|
-
Renderer internals:
|
|
170
|
+
PolyCSS renders through the DOM, so performance is mostly shaped by two things: the number of mounted leaves, and the amount of texture atlas area the browser has to paint. The renderer tries to keep the common cases cheap. Simple surfaces stay as solid CSS elements, while textured, irregular, or high-detail geometry falls back to atlas-backed slices only when needed.
|
|
168
171
|
|
|
169
172
|
Each visible polygon is emitted as one leaf element; the renderer chooses the least expensive CSS primitive that can represent the polygon, then uses `matrix3d(...)` to place that primitive in 3D space.
|
|
170
173
|
|
|
@@ -9,7 +9,7 @@ interface PolyCameraOptions {
|
|
|
9
9
|
distance?: number;
|
|
10
10
|
}
|
|
11
11
|
interface PolyPerspectiveCameraOptions extends PolyCameraOptions {
|
|
12
|
-
/** CSS perspective distance in pixels. Default
|
|
12
|
+
/** CSS perspective distance in pixels. Default 32000. */
|
|
13
13
|
perspective?: number;
|
|
14
14
|
}
|
|
15
15
|
interface PolyOrthographicCameraOptions extends PolyCameraOptions {
|
|
@@ -28,7 +28,7 @@ interface PolyOrthographicCameraHandle extends CameraHandle {
|
|
|
28
28
|
/**
|
|
29
29
|
* Creates a perspective camera handle. The `perspectiveStyle` property
|
|
30
30
|
* returns the CSS value to apply to the camera container's `perspective`
|
|
31
|
-
* property (default `"
|
|
31
|
+
* property (default `"32000px"`).
|
|
32
32
|
*/
|
|
33
33
|
declare function createPolyPerspectiveCamera(options?: PolyPerspectiveCameraOptions): PolyPerspectiveCameraHandle;
|
|
34
34
|
/**
|
|
@@ -47,25 +47,10 @@ declare function createPolyOrthographicCamera(options?: PolyOrthographicCameraOp
|
|
|
47
47
|
declare const createPolyCamera: typeof createPolyOrthographicCamera;
|
|
48
48
|
|
|
49
49
|
/**
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
* `PolySceneHandle` whose `add(parseResult, transform?)` mounts a mesh under
|
|
55
|
-
* the scene root and returns a removable `PolyMeshHandle`.
|
|
56
|
-
*
|
|
57
|
-
* Implementation:
|
|
58
|
-
* - Inserts a `<div class="polycss-scene">` into the host.
|
|
59
|
-
* - Each `add(...)` creates a `<div class="polycss-mesh">` with the
|
|
60
|
-
* mesh transform; mounts every valid polygon as an atlas-backed
|
|
61
|
-
* background sprite.
|
|
62
|
-
* - `destroy()` removes the scene element and disposes every mesh
|
|
63
|
-
* (which in turn disposes generated atlas blob URLs).
|
|
64
|
-
*
|
|
65
|
-
* The scene element is a 0×0 anchor at world (0,0,0) — pinned via
|
|
66
|
-
* top:50%/left:50% so it sits at the visible center of the host. This
|
|
67
|
-
* matches React/Vue's PolyScene anchor pattern. Polygons render around
|
|
68
|
-
* the anchor via their own matrix3d translations.
|
|
50
|
+
* Public + internal types for the scene module, extracted from
|
|
51
|
+
* createPolyScene.ts so other scene/* helpers can import them without
|
|
52
|
+
* pulling in the whole factory body. createPolyScene.ts re-exports the
|
|
53
|
+
* public ones so the polycss package public surface is unchanged.
|
|
69
54
|
*/
|
|
70
55
|
|
|
71
56
|
interface PolySceneOptions {
|
|
@@ -131,6 +116,15 @@ interface PolySceneOptions {
|
|
|
131
116
|
*/
|
|
132
117
|
maxExtend?: number;
|
|
133
118
|
};
|
|
119
|
+
/**
|
|
120
|
+
* When `true`, emit `data-poly-shadow-*` attribution attributes on every
|
|
121
|
+
* shadow SVG and path (type, receiver mesh id, receiver face index,
|
|
122
|
+
* member poly indices, caster ids, caster poly indices). Useful for
|
|
123
|
+
* DevTools inspection and per-poly attribution in debug benches. When
|
|
124
|
+
* `false` (default), these attributes are suppressed entirely — production
|
|
125
|
+
* scenes ship a cleaner DOM and avoid serializing per-frame JSON.
|
|
126
|
+
*/
|
|
127
|
+
debugShadowAttrs?: boolean;
|
|
134
128
|
}
|
|
135
129
|
interface PolyMeshTransform {
|
|
136
130
|
/** Stable identifier — exposed on the handle and reflected on the
|
|
@@ -193,8 +187,7 @@ interface PolyMeshHandle {
|
|
|
193
187
|
* the wrapper as `data-poly-mesh-id`. */
|
|
194
188
|
readonly id?: string;
|
|
195
189
|
/** Current transform snapshot (position / rotation / scale). Returned
|
|
196
|
-
* by reference — treat as read-only and use `setTransform` to
|
|
197
|
-
* mutate. */
|
|
190
|
+
* by reference — treat as read-only and use `setTransform` to mutate. */
|
|
198
191
|
readonly transform: PolyMeshTransform;
|
|
199
192
|
/** Remove the mesh from the scene. */
|
|
200
193
|
remove(): void;
|
|
@@ -290,10 +283,101 @@ interface PolySceneHandle {
|
|
|
290
283
|
* the element doesn't belong to this scene. */
|
|
291
284
|
findMeshByElement(element: Element | null): PolyMeshHandle | null;
|
|
292
285
|
}
|
|
293
|
-
declare function createPolyScene(host: HTMLElement, options: PolySceneOptions): PolySceneHandle;
|
|
294
286
|
|
|
295
|
-
|
|
296
|
-
|
|
287
|
+
/**
|
|
288
|
+
* Shared types, constants, and utilities for orbit/map controls factories.
|
|
289
|
+
* Not part of the public API surface — use createPolyOrbitControls or
|
|
290
|
+
* createPolyMapControls.
|
|
291
|
+
*/
|
|
292
|
+
|
|
293
|
+
interface PolyControlsAnimateOptions {
|
|
294
|
+
/**
|
|
295
|
+
* Rotation rate in degrees per 60 Hz-equivalent frame. The tick is
|
|
296
|
+
* dt-clamped so 0.3 deg/frame ≈ 18 deg/sec on every refresh rate.
|
|
297
|
+
* Default: 0.3.
|
|
298
|
+
*/
|
|
299
|
+
speed?: number;
|
|
300
|
+
/** Rotation axis. Default: "y" (yaw, rotates around vertical world Z). */
|
|
301
|
+
axis?: "x" | "y";
|
|
302
|
+
/** Halt the loop while a pointer drag is in progress. Default: true. */
|
|
303
|
+
pauseOnInteraction?: boolean;
|
|
304
|
+
}
|
|
305
|
+
interface PolyControlsBaseOptions {
|
|
306
|
+
/** Pointer-drag. Default: true. */
|
|
307
|
+
drag?: boolean;
|
|
308
|
+
/** Wheel / pinch zoom. Default: true. */
|
|
309
|
+
wheel?: boolean;
|
|
310
|
+
/**
|
|
311
|
+
* When `true`, wheel events change `distance` (camera pull-back in CSS px)
|
|
312
|
+
* instead of `zoom`. Mirrors Three.js OrbitControls dolly behaviour.
|
|
313
|
+
* Default: false (zoom mode).
|
|
314
|
+
*/
|
|
315
|
+
dolly?: boolean;
|
|
316
|
+
/**
|
|
317
|
+
* Drag-direction inversion. `false` = natural, `true` = invert (×-1),
|
|
318
|
+
* a number multiplies sensitivity (negative inverts). Default: false.
|
|
319
|
+
*/
|
|
320
|
+
invert?: boolean | number;
|
|
321
|
+
/** Minimum CSS zoom. Default: 0.1. */
|
|
322
|
+
minZoom?: number;
|
|
323
|
+
/** Maximum CSS zoom. Default: 10. */
|
|
324
|
+
maxZoom?: number;
|
|
325
|
+
/** Minimum dolly distance in CSS pixels. Default: 0. Only used when `dolly: true`. */
|
|
326
|
+
minDistance?: number;
|
|
327
|
+
/** Maximum dolly distance in CSS pixels. Default: Infinity. Only used when `dolly: true`. */
|
|
328
|
+
maxDistance?: number;
|
|
329
|
+
/** Auto-rotate. Pass false (or omit) to disable. */
|
|
330
|
+
animate?: false | PolyControlsAnimateOptions;
|
|
331
|
+
}
|
|
332
|
+
interface PolyControlsCamera {
|
|
333
|
+
rotX: number;
|
|
334
|
+
rotY: number;
|
|
335
|
+
zoom: number;
|
|
336
|
+
target: Vec3;
|
|
337
|
+
distance: number;
|
|
338
|
+
}
|
|
339
|
+
interface PolyControlsChangeEvent {
|
|
340
|
+
type: "change";
|
|
341
|
+
camera: PolyControlsCamera;
|
|
342
|
+
}
|
|
343
|
+
interface PolyControlsInteractionEvent {
|
|
344
|
+
type: "start" | "end";
|
|
345
|
+
camera: PolyControlsCamera;
|
|
346
|
+
}
|
|
347
|
+
type PolyControlsEvent = PolyControlsChangeEvent | PolyControlsInteractionEvent;
|
|
348
|
+
type PolyControlsListener<E extends PolyControlsEvent = PolyControlsEvent> = (event: E) => void;
|
|
349
|
+
interface PolyControlsHandle {
|
|
350
|
+
update(partial: PolyControlsBaseOptions): void;
|
|
351
|
+
resume(): void;
|
|
352
|
+
pause(): void;
|
|
353
|
+
destroy(): void;
|
|
354
|
+
addEventListener<T extends PolyControlsEvent["type"]>(type: T, listener: PolyControlsListener<Extract<PolyControlsEvent, {
|
|
355
|
+
type: T;
|
|
356
|
+
}>>): void;
|
|
357
|
+
removeEventListener<T extends PolyControlsEvent["type"]>(type: T, listener: PolyControlsListener<Extract<PolyControlsEvent, {
|
|
358
|
+
type: T;
|
|
359
|
+
}>>): void;
|
|
360
|
+
hasEventListener<T extends PolyControlsEvent["type"]>(type: T, listener: PolyControlsListener<Extract<PolyControlsEvent, {
|
|
361
|
+
type: T;
|
|
362
|
+
}>>): boolean;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/**
|
|
366
|
+
* createPolyOrbitControls — orbit-mode camera input for a PolyScene.
|
|
367
|
+
*
|
|
368
|
+
* Left-drag rotates rotX / rotY around the target (orbit). Wheel zooms or
|
|
369
|
+
* dollies. Mirrors Three.js OrbitControls semantics.
|
|
370
|
+
*
|
|
371
|
+
* For map/pan semantics (left-drag pans, right-drag orbits) use
|
|
372
|
+
* `createPolyMapControls` instead.
|
|
373
|
+
*/
|
|
374
|
+
|
|
375
|
+
type PolyOrbitControlsOptions = PolyControlsBaseOptions;
|
|
376
|
+
type PolyOrbitControlsHandle = PolyControlsHandle;
|
|
377
|
+
declare function createPolyOrbitControls(scene: PolySceneHandle, options?: PolyOrbitControlsOptions): PolyOrbitControlsHandle;
|
|
378
|
+
|
|
379
|
+
declare const ELEMENT_BASE$b: typeof HTMLElement;
|
|
380
|
+
declare class PolySceneElement extends ELEMENT_BASE$b {
|
|
297
381
|
static get observedAttributes(): string[];
|
|
298
382
|
private _scene;
|
|
299
383
|
private _implicitCamera;
|
|
@@ -312,8 +396,8 @@ declare class PolySceneElement extends ELEMENT_BASE$a {
|
|
|
312
396
|
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
313
397
|
}
|
|
314
398
|
|
|
315
|
-
declare const ELEMENT_BASE$
|
|
316
|
-
declare class PolyMeshElement extends ELEMENT_BASE$
|
|
399
|
+
declare const ELEMENT_BASE$a: typeof HTMLElement;
|
|
400
|
+
declare class PolyMeshElement extends ELEMENT_BASE$a {
|
|
317
401
|
static get observedAttributes(): string[];
|
|
318
402
|
private _handle;
|
|
319
403
|
private _parseResult;
|
|
@@ -327,6 +411,21 @@ declare class PolyMeshElement extends ELEMENT_BASE$9 {
|
|
|
327
411
|
private _maybeLoad;
|
|
328
412
|
}
|
|
329
413
|
|
|
414
|
+
declare const ELEMENT_BASE$9: typeof HTMLElement;
|
|
415
|
+
declare class PolyIframeElement extends ELEMENT_BASE$9 {
|
|
416
|
+
static get observedAttributes(): string[];
|
|
417
|
+
private _wrapper;
|
|
418
|
+
private _iframe;
|
|
419
|
+
/** The iframe element this <poly-iframe> mounted, or null when detached. */
|
|
420
|
+
getIframeElement(): HTMLIFrameElement | null;
|
|
421
|
+
connectedCallback(): void;
|
|
422
|
+
disconnectedCallback(): void;
|
|
423
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
424
|
+
private _mount;
|
|
425
|
+
private _applyGeometry;
|
|
426
|
+
private _teardown;
|
|
427
|
+
}
|
|
428
|
+
|
|
330
429
|
declare const ELEMENT_BASE$8: typeof HTMLElement;
|
|
331
430
|
declare class PolyPolygonElement extends ELEMENT_BASE$8 {
|
|
332
431
|
static get observedAttributes(): string[];
|
|
@@ -342,6 +441,11 @@ declare const ELEMENT_BASE$7: typeof HTMLElement;
|
|
|
342
441
|
declare class PolyOrbitControlsElement extends ELEMENT_BASE$7 {
|
|
343
442
|
static get observedAttributes(): string[];
|
|
344
443
|
private _controls;
|
|
444
|
+
/** Returns the wrapped PolyOrbitControlsHandle once the element has
|
|
445
|
+
* connected to its `<poly-scene>` ancestor. Lets external callers attach
|
|
446
|
+
* `change` listeners (or call `update()` / `pause()`) the same way they
|
|
447
|
+
* would on a vanilla `createPolyOrbitControls(scene, ...)` handle. */
|
|
448
|
+
getControls(): PolyOrbitControlsHandle | null;
|
|
345
449
|
private _readAnimate;
|
|
346
450
|
private _readOptions;
|
|
347
451
|
private _findScene;
|
|
@@ -385,7 +489,7 @@ declare class PolyFirstPersonControlsElement extends ELEMENT_BASE$5 {
|
|
|
385
489
|
* CSS `perspective` property set.
|
|
386
490
|
*
|
|
387
491
|
* Attributes (all optional):
|
|
388
|
-
* perspective — number, CSS perspective in pixels (default
|
|
492
|
+
* perspective — number, CSS perspective in pixels (default 32000)
|
|
389
493
|
* zoom — number
|
|
390
494
|
* rot-x — number, degrees (default 65)
|
|
391
495
|
* rot-y — number, degrees (default 45)
|
|
@@ -405,7 +509,7 @@ declare class PolyPerspectiveCameraElement extends ELEMENT_BASE$4 {
|
|
|
405
509
|
private _teardown;
|
|
406
510
|
connectedCallback(): void;
|
|
407
511
|
disconnectedCallback(): void;
|
|
408
|
-
attributeChangedCallback(
|
|
512
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
409
513
|
}
|
|
410
514
|
|
|
411
515
|
/**
|
|
@@ -498,6 +602,7 @@ declare abstract class PolyShapeElement extends ELEMENT_BASE {
|
|
|
498
602
|
abstract buildPolygons(): Polygon[];
|
|
499
603
|
connectedCallback(): void;
|
|
500
604
|
disconnectedCallback(): void;
|
|
605
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
501
606
|
private _tearDown;
|
|
502
607
|
private _mount;
|
|
503
608
|
}
|
|
@@ -546,4 +651,4 @@ declare class PolyTorusElement extends PolyShapeElement {
|
|
|
546
651
|
buildPolygons(): Polygon[];
|
|
547
652
|
}
|
|
548
653
|
|
|
549
|
-
export {
|
|
654
|
+
export { PolyOrthographicCameraElement as A, type PolyOrthographicCameraHandle as B, type PolyOrthographicCameraOptions as C, PolyPerspectiveCameraElement as D, type PolyPerspectiveCameraHandle as E, type PolyPerspectiveCameraOptions as F, PolyPlaneElement as G, PolyPolygonElement as H, PolyRingElement as I, PolySceneElement as J, PolySelectElement as K, PolySphereElement as L, PolyTetrahedronElement as M, PolyTorusElement as N, PolyTransformControlsElement as O, type PolySceneOptions as P, createPolyCamera as Q, createPolyOrbitControls as R, createPolyOrthographicCamera as S, createPolyPerspectiveCamera as T, type PolySceneHandle as a, type PolyControlsHandle as b, type PolyControlsBaseOptions as c, type PolyControlsEvent as d, type PolyControlsListener as e, type PolyMeshHandle as f, PolyBoxElement as g, PolyCameraElement as h, type PolyCameraOptions as i, PolyConeElement as j, type PolyControlsAnimateOptions as k, type PolyControlsCamera as l, type PolyControlsChangeEvent as m, type PolyControlsInteractionEvent as n, PolyCylinderElement as o, PolyDodecahedronElement as p, PolyFirstPersonControlsElement as q, PolyIcosahedronElement as r, PolyIframeElement as s, PolyMapControlsElement as t, PolyMeshElement as u, type PolyMeshTransform as v, PolyOctahedronElement as w, PolyOrbitControlsElement as x, type PolyOrbitControlsHandle as y, type PolyOrbitControlsOptions as z };
|
|
@@ -9,7 +9,7 @@ interface PolyCameraOptions {
|
|
|
9
9
|
distance?: number;
|
|
10
10
|
}
|
|
11
11
|
interface PolyPerspectiveCameraOptions extends PolyCameraOptions {
|
|
12
|
-
/** CSS perspective distance in pixels. Default
|
|
12
|
+
/** CSS perspective distance in pixels. Default 32000. */
|
|
13
13
|
perspective?: number;
|
|
14
14
|
}
|
|
15
15
|
interface PolyOrthographicCameraOptions extends PolyCameraOptions {
|
|
@@ -28,7 +28,7 @@ interface PolyOrthographicCameraHandle extends CameraHandle {
|
|
|
28
28
|
/**
|
|
29
29
|
* Creates a perspective camera handle. The `perspectiveStyle` property
|
|
30
30
|
* returns the CSS value to apply to the camera container's `perspective`
|
|
31
|
-
* property (default `"
|
|
31
|
+
* property (default `"32000px"`).
|
|
32
32
|
*/
|
|
33
33
|
declare function createPolyPerspectiveCamera(options?: PolyPerspectiveCameraOptions): PolyPerspectiveCameraHandle;
|
|
34
34
|
/**
|
|
@@ -47,25 +47,10 @@ declare function createPolyOrthographicCamera(options?: PolyOrthographicCameraOp
|
|
|
47
47
|
declare const createPolyCamera: typeof createPolyOrthographicCamera;
|
|
48
48
|
|
|
49
49
|
/**
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
* `PolySceneHandle` whose `add(parseResult, transform?)` mounts a mesh under
|
|
55
|
-
* the scene root and returns a removable `PolyMeshHandle`.
|
|
56
|
-
*
|
|
57
|
-
* Implementation:
|
|
58
|
-
* - Inserts a `<div class="polycss-scene">` into the host.
|
|
59
|
-
* - Each `add(...)` creates a `<div class="polycss-mesh">` with the
|
|
60
|
-
* mesh transform; mounts every valid polygon as an atlas-backed
|
|
61
|
-
* background sprite.
|
|
62
|
-
* - `destroy()` removes the scene element and disposes every mesh
|
|
63
|
-
* (which in turn disposes generated atlas blob URLs).
|
|
64
|
-
*
|
|
65
|
-
* The scene element is a 0×0 anchor at world (0,0,0) — pinned via
|
|
66
|
-
* top:50%/left:50% so it sits at the visible center of the host. This
|
|
67
|
-
* matches React/Vue's PolyScene anchor pattern. Polygons render around
|
|
68
|
-
* the anchor via their own matrix3d translations.
|
|
50
|
+
* Public + internal types for the scene module, extracted from
|
|
51
|
+
* createPolyScene.ts so other scene/* helpers can import them without
|
|
52
|
+
* pulling in the whole factory body. createPolyScene.ts re-exports the
|
|
53
|
+
* public ones so the polycss package public surface is unchanged.
|
|
69
54
|
*/
|
|
70
55
|
|
|
71
56
|
interface PolySceneOptions {
|
|
@@ -131,6 +116,15 @@ interface PolySceneOptions {
|
|
|
131
116
|
*/
|
|
132
117
|
maxExtend?: number;
|
|
133
118
|
};
|
|
119
|
+
/**
|
|
120
|
+
* When `true`, emit `data-poly-shadow-*` attribution attributes on every
|
|
121
|
+
* shadow SVG and path (type, receiver mesh id, receiver face index,
|
|
122
|
+
* member poly indices, caster ids, caster poly indices). Useful for
|
|
123
|
+
* DevTools inspection and per-poly attribution in debug benches. When
|
|
124
|
+
* `false` (default), these attributes are suppressed entirely — production
|
|
125
|
+
* scenes ship a cleaner DOM and avoid serializing per-frame JSON.
|
|
126
|
+
*/
|
|
127
|
+
debugShadowAttrs?: boolean;
|
|
134
128
|
}
|
|
135
129
|
interface PolyMeshTransform {
|
|
136
130
|
/** Stable identifier — exposed on the handle and reflected on the
|
|
@@ -193,8 +187,7 @@ interface PolyMeshHandle {
|
|
|
193
187
|
* the wrapper as `data-poly-mesh-id`. */
|
|
194
188
|
readonly id?: string;
|
|
195
189
|
/** Current transform snapshot (position / rotation / scale). Returned
|
|
196
|
-
* by reference — treat as read-only and use `setTransform` to
|
|
197
|
-
* mutate. */
|
|
190
|
+
* by reference — treat as read-only and use `setTransform` to mutate. */
|
|
198
191
|
readonly transform: PolyMeshTransform;
|
|
199
192
|
/** Remove the mesh from the scene. */
|
|
200
193
|
remove(): void;
|
|
@@ -290,10 +283,101 @@ interface PolySceneHandle {
|
|
|
290
283
|
* the element doesn't belong to this scene. */
|
|
291
284
|
findMeshByElement(element: Element | null): PolyMeshHandle | null;
|
|
292
285
|
}
|
|
293
|
-
declare function createPolyScene(host: HTMLElement, options: PolySceneOptions): PolySceneHandle;
|
|
294
286
|
|
|
295
|
-
|
|
296
|
-
|
|
287
|
+
/**
|
|
288
|
+
* Shared types, constants, and utilities for orbit/map controls factories.
|
|
289
|
+
* Not part of the public API surface — use createPolyOrbitControls or
|
|
290
|
+
* createPolyMapControls.
|
|
291
|
+
*/
|
|
292
|
+
|
|
293
|
+
interface PolyControlsAnimateOptions {
|
|
294
|
+
/**
|
|
295
|
+
* Rotation rate in degrees per 60 Hz-equivalent frame. The tick is
|
|
296
|
+
* dt-clamped so 0.3 deg/frame ≈ 18 deg/sec on every refresh rate.
|
|
297
|
+
* Default: 0.3.
|
|
298
|
+
*/
|
|
299
|
+
speed?: number;
|
|
300
|
+
/** Rotation axis. Default: "y" (yaw, rotates around vertical world Z). */
|
|
301
|
+
axis?: "x" | "y";
|
|
302
|
+
/** Halt the loop while a pointer drag is in progress. Default: true. */
|
|
303
|
+
pauseOnInteraction?: boolean;
|
|
304
|
+
}
|
|
305
|
+
interface PolyControlsBaseOptions {
|
|
306
|
+
/** Pointer-drag. Default: true. */
|
|
307
|
+
drag?: boolean;
|
|
308
|
+
/** Wheel / pinch zoom. Default: true. */
|
|
309
|
+
wheel?: boolean;
|
|
310
|
+
/**
|
|
311
|
+
* When `true`, wheel events change `distance` (camera pull-back in CSS px)
|
|
312
|
+
* instead of `zoom`. Mirrors Three.js OrbitControls dolly behaviour.
|
|
313
|
+
* Default: false (zoom mode).
|
|
314
|
+
*/
|
|
315
|
+
dolly?: boolean;
|
|
316
|
+
/**
|
|
317
|
+
* Drag-direction inversion. `false` = natural, `true` = invert (×-1),
|
|
318
|
+
* a number multiplies sensitivity (negative inverts). Default: false.
|
|
319
|
+
*/
|
|
320
|
+
invert?: boolean | number;
|
|
321
|
+
/** Minimum CSS zoom. Default: 0.1. */
|
|
322
|
+
minZoom?: number;
|
|
323
|
+
/** Maximum CSS zoom. Default: 10. */
|
|
324
|
+
maxZoom?: number;
|
|
325
|
+
/** Minimum dolly distance in CSS pixels. Default: 0. Only used when `dolly: true`. */
|
|
326
|
+
minDistance?: number;
|
|
327
|
+
/** Maximum dolly distance in CSS pixels. Default: Infinity. Only used when `dolly: true`. */
|
|
328
|
+
maxDistance?: number;
|
|
329
|
+
/** Auto-rotate. Pass false (or omit) to disable. */
|
|
330
|
+
animate?: false | PolyControlsAnimateOptions;
|
|
331
|
+
}
|
|
332
|
+
interface PolyControlsCamera {
|
|
333
|
+
rotX: number;
|
|
334
|
+
rotY: number;
|
|
335
|
+
zoom: number;
|
|
336
|
+
target: Vec3;
|
|
337
|
+
distance: number;
|
|
338
|
+
}
|
|
339
|
+
interface PolyControlsChangeEvent {
|
|
340
|
+
type: "change";
|
|
341
|
+
camera: PolyControlsCamera;
|
|
342
|
+
}
|
|
343
|
+
interface PolyControlsInteractionEvent {
|
|
344
|
+
type: "start" | "end";
|
|
345
|
+
camera: PolyControlsCamera;
|
|
346
|
+
}
|
|
347
|
+
type PolyControlsEvent = PolyControlsChangeEvent | PolyControlsInteractionEvent;
|
|
348
|
+
type PolyControlsListener<E extends PolyControlsEvent = PolyControlsEvent> = (event: E) => void;
|
|
349
|
+
interface PolyControlsHandle {
|
|
350
|
+
update(partial: PolyControlsBaseOptions): void;
|
|
351
|
+
resume(): void;
|
|
352
|
+
pause(): void;
|
|
353
|
+
destroy(): void;
|
|
354
|
+
addEventListener<T extends PolyControlsEvent["type"]>(type: T, listener: PolyControlsListener<Extract<PolyControlsEvent, {
|
|
355
|
+
type: T;
|
|
356
|
+
}>>): void;
|
|
357
|
+
removeEventListener<T extends PolyControlsEvent["type"]>(type: T, listener: PolyControlsListener<Extract<PolyControlsEvent, {
|
|
358
|
+
type: T;
|
|
359
|
+
}>>): void;
|
|
360
|
+
hasEventListener<T extends PolyControlsEvent["type"]>(type: T, listener: PolyControlsListener<Extract<PolyControlsEvent, {
|
|
361
|
+
type: T;
|
|
362
|
+
}>>): boolean;
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/**
|
|
366
|
+
* createPolyOrbitControls — orbit-mode camera input for a PolyScene.
|
|
367
|
+
*
|
|
368
|
+
* Left-drag rotates rotX / rotY around the target (orbit). Wheel zooms or
|
|
369
|
+
* dollies. Mirrors Three.js OrbitControls semantics.
|
|
370
|
+
*
|
|
371
|
+
* For map/pan semantics (left-drag pans, right-drag orbits) use
|
|
372
|
+
* `createPolyMapControls` instead.
|
|
373
|
+
*/
|
|
374
|
+
|
|
375
|
+
type PolyOrbitControlsOptions = PolyControlsBaseOptions;
|
|
376
|
+
type PolyOrbitControlsHandle = PolyControlsHandle;
|
|
377
|
+
declare function createPolyOrbitControls(scene: PolySceneHandle, options?: PolyOrbitControlsOptions): PolyOrbitControlsHandle;
|
|
378
|
+
|
|
379
|
+
declare const ELEMENT_BASE$b: typeof HTMLElement;
|
|
380
|
+
declare class PolySceneElement extends ELEMENT_BASE$b {
|
|
297
381
|
static get observedAttributes(): string[];
|
|
298
382
|
private _scene;
|
|
299
383
|
private _implicitCamera;
|
|
@@ -312,8 +396,8 @@ declare class PolySceneElement extends ELEMENT_BASE$a {
|
|
|
312
396
|
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
313
397
|
}
|
|
314
398
|
|
|
315
|
-
declare const ELEMENT_BASE$
|
|
316
|
-
declare class PolyMeshElement extends ELEMENT_BASE$
|
|
399
|
+
declare const ELEMENT_BASE$a: typeof HTMLElement;
|
|
400
|
+
declare class PolyMeshElement extends ELEMENT_BASE$a {
|
|
317
401
|
static get observedAttributes(): string[];
|
|
318
402
|
private _handle;
|
|
319
403
|
private _parseResult;
|
|
@@ -327,6 +411,21 @@ declare class PolyMeshElement extends ELEMENT_BASE$9 {
|
|
|
327
411
|
private _maybeLoad;
|
|
328
412
|
}
|
|
329
413
|
|
|
414
|
+
declare const ELEMENT_BASE$9: typeof HTMLElement;
|
|
415
|
+
declare class PolyIframeElement extends ELEMENT_BASE$9 {
|
|
416
|
+
static get observedAttributes(): string[];
|
|
417
|
+
private _wrapper;
|
|
418
|
+
private _iframe;
|
|
419
|
+
/** The iframe element this <poly-iframe> mounted, or null when detached. */
|
|
420
|
+
getIframeElement(): HTMLIFrameElement | null;
|
|
421
|
+
connectedCallback(): void;
|
|
422
|
+
disconnectedCallback(): void;
|
|
423
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
424
|
+
private _mount;
|
|
425
|
+
private _applyGeometry;
|
|
426
|
+
private _teardown;
|
|
427
|
+
}
|
|
428
|
+
|
|
330
429
|
declare const ELEMENT_BASE$8: typeof HTMLElement;
|
|
331
430
|
declare class PolyPolygonElement extends ELEMENT_BASE$8 {
|
|
332
431
|
static get observedAttributes(): string[];
|
|
@@ -342,6 +441,11 @@ declare const ELEMENT_BASE$7: typeof HTMLElement;
|
|
|
342
441
|
declare class PolyOrbitControlsElement extends ELEMENT_BASE$7 {
|
|
343
442
|
static get observedAttributes(): string[];
|
|
344
443
|
private _controls;
|
|
444
|
+
/** Returns the wrapped PolyOrbitControlsHandle once the element has
|
|
445
|
+
* connected to its `<poly-scene>` ancestor. Lets external callers attach
|
|
446
|
+
* `change` listeners (or call `update()` / `pause()`) the same way they
|
|
447
|
+
* would on a vanilla `createPolyOrbitControls(scene, ...)` handle. */
|
|
448
|
+
getControls(): PolyOrbitControlsHandle | null;
|
|
345
449
|
private _readAnimate;
|
|
346
450
|
private _readOptions;
|
|
347
451
|
private _findScene;
|
|
@@ -385,7 +489,7 @@ declare class PolyFirstPersonControlsElement extends ELEMENT_BASE$5 {
|
|
|
385
489
|
* CSS `perspective` property set.
|
|
386
490
|
*
|
|
387
491
|
* Attributes (all optional):
|
|
388
|
-
* perspective — number, CSS perspective in pixels (default
|
|
492
|
+
* perspective — number, CSS perspective in pixels (default 32000)
|
|
389
493
|
* zoom — number
|
|
390
494
|
* rot-x — number, degrees (default 65)
|
|
391
495
|
* rot-y — number, degrees (default 45)
|
|
@@ -405,7 +509,7 @@ declare class PolyPerspectiveCameraElement extends ELEMENT_BASE$4 {
|
|
|
405
509
|
private _teardown;
|
|
406
510
|
connectedCallback(): void;
|
|
407
511
|
disconnectedCallback(): void;
|
|
408
|
-
attributeChangedCallback(
|
|
512
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
409
513
|
}
|
|
410
514
|
|
|
411
515
|
/**
|
|
@@ -498,6 +602,7 @@ declare abstract class PolyShapeElement extends ELEMENT_BASE {
|
|
|
498
602
|
abstract buildPolygons(): Polygon[];
|
|
499
603
|
connectedCallback(): void;
|
|
500
604
|
disconnectedCallback(): void;
|
|
605
|
+
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
|
|
501
606
|
private _tearDown;
|
|
502
607
|
private _mount;
|
|
503
608
|
}
|
|
@@ -546,4 +651,4 @@ declare class PolyTorusElement extends PolyShapeElement {
|
|
|
546
651
|
buildPolygons(): Polygon[];
|
|
547
652
|
}
|
|
548
653
|
|
|
549
|
-
export {
|
|
654
|
+
export { PolyOrthographicCameraElement as A, type PolyOrthographicCameraHandle as B, type PolyOrthographicCameraOptions as C, PolyPerspectiveCameraElement as D, type PolyPerspectiveCameraHandle as E, type PolyPerspectiveCameraOptions as F, PolyPlaneElement as G, PolyPolygonElement as H, PolyRingElement as I, PolySceneElement as J, PolySelectElement as K, PolySphereElement as L, PolyTetrahedronElement as M, PolyTorusElement as N, PolyTransformControlsElement as O, type PolySceneOptions as P, createPolyCamera as Q, createPolyOrbitControls as R, createPolyOrthographicCamera as S, createPolyPerspectiveCamera as T, type PolySceneHandle as a, type PolyControlsHandle as b, type PolyControlsBaseOptions as c, type PolyControlsEvent as d, type PolyControlsListener as e, type PolyMeshHandle as f, PolyBoxElement as g, PolyCameraElement as h, type PolyCameraOptions as i, PolyConeElement as j, type PolyControlsAnimateOptions as k, type PolyControlsCamera as l, type PolyControlsChangeEvent as m, type PolyControlsInteractionEvent as n, PolyCylinderElement as o, PolyDodecahedronElement as p, PolyFirstPersonControlsElement as q, PolyIcosahedronElement as r, PolyIframeElement as s, PolyMapControlsElement as t, PolyMeshElement as u, type PolyMeshTransform as v, PolyOctahedronElement as w, PolyOrbitControlsElement as x, type PolyOrbitControlsHandle as y, type PolyOrbitControlsOptions as z };
|