@almadar/ui 1.0.34 → 2.0.0

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.
@@ -1,1162 +0,0 @@
1
- import React__default, { Component, ReactNode, ErrorInfo } from 'react';
2
- import * as THREE from 'three';
3
- import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
4
- import { I as IsometricTile, a as IsometricUnit, b as IsometricFeature } from '../../../../isometric-ynNHVPZx.js';
5
-
6
- /**
7
- * Scene3D
8
- *
9
- * Three.js scene wrapper component for React Three Fiber.
10
- * Manages the scene environment, fog, and background.
11
- *
12
- * @packageDocumentation
13
- */
14
-
15
- interface Scene3DProps {
16
- /** Background color or URL */
17
- background?: string;
18
- /** Fog configuration */
19
- fog?: {
20
- color: string;
21
- near: number;
22
- far: number;
23
- };
24
- /** Children to render in scene */
25
- children?: React__default.ReactNode;
26
- }
27
- /**
28
- * Scene3D Component
29
- *
30
- * Manages Three.js scene settings like background and fog.
31
- *
32
- * @example
33
- * ```tsx
34
- * <Canvas>
35
- * <Scene3D background="#1a1a2e" fog={{ color: '#1a1a2e', near: 10, far: 50 }}>
36
- * <GameObjects />
37
- * </Scene3D>
38
- * </Canvas>
39
- * ```
40
- */
41
- declare function Scene3D({ background, fog, children }: Scene3DProps): JSX.Element;
42
-
43
- /**
44
- * Camera3D
45
- *
46
- * Three.js camera component with orbit controls.
47
- * Supports isometric, perspective, and top-down camera modes.
48
- *
49
- * @packageDocumentation
50
- */
51
-
52
- type CameraMode$1 = 'isometric' | 'perspective' | 'top-down';
53
- interface Camera3DProps {
54
- /** Camera mode */
55
- mode?: CameraMode$1;
56
- /** Initial camera position */
57
- position?: [number, number, number];
58
- /** Target to look at */
59
- target?: [number, number, number];
60
- /** Zoom level */
61
- zoom?: number;
62
- /** Field of view (perspective mode only) */
63
- fov?: number;
64
- /** Enable orbit controls */
65
- enableOrbit?: boolean;
66
- /** Minimum zoom distance */
67
- minDistance?: number;
68
- /** Maximum zoom distance */
69
- maxDistance?: number;
70
- /** Called when camera changes */
71
- onChange?: (camera: THREE.Camera) => void;
72
- }
73
- interface Camera3DHandle {
74
- /** Get current camera */
75
- getCamera: () => THREE.Camera;
76
- /** Set camera position */
77
- setPosition: (x: number, y: number, z: number) => void;
78
- /** Look at target */
79
- lookAt: (x: number, y: number, z: number) => void;
80
- /** Reset to initial position */
81
- reset: () => void;
82
- /** Get current view bounds */
83
- getViewBounds: () => {
84
- min: THREE.Vector3;
85
- max: THREE.Vector3;
86
- };
87
- }
88
- /**
89
- * Camera3D Component
90
- *
91
- * Configurable camera with orbit controls and multiple modes.
92
- *
93
- * @example
94
- * ```tsx
95
- * <Canvas>
96
- * <Camera3D mode="isometric" position={[10, 10, 10]} target={[0, 0, 0]} />
97
- * </Canvas>
98
- * ```
99
- */
100
- declare const Camera3D: React__default.ForwardRefExoticComponent<Camera3DProps & React__default.RefAttributes<Camera3DHandle>>;
101
-
102
- /**
103
- * Lighting3D
104
- *
105
- * Default lighting setup for 3D game scenes.
106
- * Includes ambient, directional, and optional point lights.
107
- *
108
- * @packageDocumentation
109
- */
110
- interface Lighting3DProps {
111
- /** Ambient light intensity */
112
- ambientIntensity?: number;
113
- /** Ambient light color */
114
- ambientColor?: string;
115
- /** Directional light intensity */
116
- directionalIntensity?: number;
117
- /** Directional light color */
118
- directionalColor?: string;
119
- /** Directional light position */
120
- directionalPosition?: [number, number, number];
121
- /** Enable shadows */
122
- shadows?: boolean;
123
- /** Shadow map size */
124
- shadowMapSize?: number;
125
- /** Shadow camera size */
126
- shadowCameraSize?: number;
127
- /** Show helper for directional light */
128
- showHelpers?: boolean;
129
- }
130
- /**
131
- * Lighting3D Component
132
- *
133
- * Pre-configured lighting setup for game scenes.
134
- *
135
- * @example
136
- * ```tsx
137
- * <Canvas>
138
- * <Lighting3D
139
- * ambientIntensity={0.6}
140
- * directionalIntensity={1.0}
141
- * shadows={true}
142
- * />
143
- * </Canvas>
144
- * ```
145
- */
146
- declare function Lighting3D({ ambientIntensity, ambientColor, directionalIntensity, directionalColor, directionalPosition, shadows, shadowMapSize, shadowCameraSize, showHelpers, }: Lighting3DProps): JSX.Element;
147
-
148
- /**
149
- * Canvas3DLoadingState
150
- *
151
- * Loading state component for 3D canvas with progress indicator.
152
- * Displays asset loading progress and estimated time remaining.
153
- *
154
- * @packageDocumentation
155
- */
156
-
157
- interface Canvas3DLoadingStateProps {
158
- /** Current loading progress (0-100) */
159
- progress?: number;
160
- /** Number of assets loaded */
161
- loaded?: number;
162
- /** Total assets to load */
163
- total?: number;
164
- /** Loading message */
165
- message?: string;
166
- /** Secondary details message */
167
- details?: string;
168
- /** Whether to show spinner */
169
- showSpinner?: boolean;
170
- /** Custom className */
171
- className?: string;
172
- }
173
- /**
174
- * Canvas3DLoadingState Component
175
- *
176
- * Displays loading progress for 3D assets.
177
- *
178
- * @example
179
- * ```tsx
180
- * <Canvas3DLoadingState
181
- * progress={65}
182
- * loaded={13}
183
- * total={20}
184
- * message="Loading 3D models..."
185
- * details="character-knight.glb"
186
- * />
187
- * ```
188
- */
189
- declare function Canvas3DLoadingState({ progress, loaded, total, message, details, showSpinner, className, }: Canvas3DLoadingStateProps): JSX.Element;
190
-
191
- /**
192
- * Canvas3DErrorBoundary
193
- *
194
- * Error boundary for 3D canvas components.
195
- * Catches Three.js and React Three Fiber errors gracefully.
196
- *
197
- * @packageDocumentation
198
- */
199
-
200
- interface Canvas3DErrorBoundaryProps {
201
- /** Child components */
202
- children: ReactNode;
203
- /** Custom fallback component */
204
- fallback?: ReactNode;
205
- /** Error callback */
206
- onError?: (error: Error, errorInfo: ErrorInfo) => void;
207
- /** Reset callback */
208
- onReset?: () => void;
209
- }
210
- interface Canvas3DErrorBoundaryState {
211
- /** Whether an error has occurred */
212
- hasError: boolean;
213
- /** The error that occurred */
214
- error: Error | null;
215
- /** Error info from React */
216
- errorInfo: ErrorInfo | null;
217
- }
218
- /**
219
- * Canvas3DErrorBoundary Component
220
- *
221
- * Catches errors in 3D canvas and displays a user-friendly fallback.
222
- *
223
- * @example
224
- * ```tsx
225
- * <Canvas3DErrorBoundary
226
- * onError={(error) => console.error('3D Error:', error)}
227
- * onReset={() => console.log('Resetting...')}
228
- * >
229
- * <GameCanvas3D {...props} />
230
- * </Canvas3DErrorBoundary>
231
- * ```
232
- */
233
- declare class Canvas3DErrorBoundary extends Component<Canvas3DErrorBoundaryProps, Canvas3DErrorBoundaryState> {
234
- constructor(props: Canvas3DErrorBoundaryProps);
235
- static getDerivedStateFromError(error: Error): Canvas3DErrorBoundaryState;
236
- componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
237
- handleReset: () => void;
238
- render(): ReactNode;
239
- }
240
-
241
- interface ModelLoaderProps {
242
- /** URL to the GLB/GLTF model */
243
- url: string;
244
- /** Position [x, y, z] */
245
- position?: [number, number, number];
246
- /** Scale - either a single number or [x, y, z] */
247
- scale?: number | [number, number, number];
248
- /** Rotation in degrees [x, y, z] */
249
- rotation?: [number, number, number];
250
- /** Whether the model is selected */
251
- isSelected?: boolean;
252
- /** Whether the model is hovered */
253
- isHovered?: boolean;
254
- /** Click handler */
255
- onClick?: () => void;
256
- /** Hover handler */
257
- onHover?: (hovered: boolean) => void;
258
- /** Fallback geometry type */
259
- fallbackGeometry?: 'box' | 'sphere' | 'cylinder' | 'none';
260
- /** Enable shadows */
261
- castShadow?: boolean;
262
- /** Receive shadows */
263
- receiveShadow?: boolean;
264
- /**
265
- * Base path for shared resources (textures, materials).
266
- * If not provided, auto-detected from the URL by looking for a `/3d/` segment.
267
- * E.g. "https://host/3d/" so that "Textures/colormap.png" resolves correctly.
268
- */
269
- resourceBasePath?: string;
270
- }
271
- /**
272
- * ModelLoader component for rendering GLB models in React Three Fiber
273
- */
274
- declare function ModelLoader({ url, position, scale, rotation, isSelected, isHovered, onClick, onHover, fallbackGeometry, castShadow, receiveShadow, resourceBasePath, }: ModelLoaderProps): JSX.Element;
275
-
276
- interface Physics3DState {
277
- id: string;
278
- x: number;
279
- y: number;
280
- z: number;
281
- vx: number;
282
- vy: number;
283
- vz: number;
284
- rx: number;
285
- ry: number;
286
- rz: number;
287
- isGrounded: boolean;
288
- gravity: number;
289
- friction: number;
290
- mass: number;
291
- state: 'Active' | 'Frozen';
292
- }
293
- interface PhysicsObject3DProps {
294
- /** Unique entity ID */
295
- entityId: string;
296
- /** GLB model URL */
297
- modelUrl: string;
298
- /** Initial position [x, y, z] */
299
- initialPosition?: [number, number, number];
300
- /** Initial velocity [vx, vy, vz] */
301
- initialVelocity?: [number, number, number];
302
- /** Mass for collision response */
303
- mass?: number;
304
- /** Gravity force (default: 9.8) */
305
- gravity?: number;
306
- /** Ground plane Y position (default: 0) */
307
- groundY?: number;
308
- /** Model scale */
309
- scale?: number | [number, number, number];
310
- /** Called when physics state updates */
311
- onPhysicsUpdate?: (state: Physics3DState) => void;
312
- /** Called when object hits ground */
313
- onGroundHit?: () => void;
314
- /** Called when collision occurs */
315
- onCollision?: (otherEntityId: string) => void;
316
- }
317
- /**
318
- * 3D Physics-enabled object for GameCanvas3D
319
- */
320
- declare function PhysicsObject3D({ entityId, modelUrl, initialPosition, initialVelocity, mass, gravity, groundY, scale, onPhysicsUpdate, onGroundHit, onCollision, }: PhysicsObject3DProps): JSX.Element;
321
- /**
322
- * Hook for controlling a PhysicsObject3D from parent component
323
- */
324
- declare function usePhysics3DController(entityId: string): {
325
- applyForce: (fx: number, fy: number, fz: number) => void;
326
- setVelocity: (vx: number, vy: number, vz: number) => void;
327
- setPosition: (x: number, y: number, z: number) => void;
328
- jump: (force?: number) => void;
329
- };
330
-
331
- /**
332
- * AssetLoader
333
- *
334
- * Three.js asset loading manager for 3D models and textures.
335
- * Supports GLB/GLTF (primary), OBJ (fallback), and texture loading.
336
- * Implements caching for performance.
337
- *
338
- * @packageDocumentation
339
- */
340
-
341
- interface LoadedModel {
342
- scene: THREE.Group;
343
- animations: THREE.AnimationClip[];
344
- }
345
- declare class AssetLoader {
346
- private objLoader;
347
- private textureLoader;
348
- private modelCache;
349
- private textureCache;
350
- private loadingPromises;
351
- constructor();
352
- /**
353
- * Load a GLB/GLTF model
354
- * @param url - URL to the .glb or .gltf file
355
- * @returns Promise with loaded model scene and animations
356
- */
357
- loadModel(url: string): Promise<LoadedModel>;
358
- /**
359
- * Load an OBJ model (fallback for non-GLB assets)
360
- * @param url - URL to the .obj file
361
- * @returns Promise with loaded object group
362
- */
363
- loadOBJ(url: string): Promise<THREE.Group>;
364
- /**
365
- * Load a texture
366
- * @param url - URL to the texture image
367
- * @returns Promise with loaded texture
368
- */
369
- loadTexture(url: string): Promise<THREE.Texture>;
370
- /**
371
- * Preload multiple assets
372
- * @param urls - Array of asset URLs to preload
373
- * @returns Promise that resolves when all assets are loaded
374
- */
375
- preload(urls: string[]): Promise<void>;
376
- /**
377
- * Check if a model is cached
378
- * @param url - Model URL
379
- */
380
- hasModel(url: string): boolean;
381
- /**
382
- * Check if a texture is cached
383
- * @param url - Texture URL
384
- */
385
- hasTexture(url: string): boolean;
386
- /**
387
- * Get cached model (throws if not cached)
388
- * @param url - Model URL
389
- */
390
- getModel(url: string): LoadedModel;
391
- /**
392
- * Get cached texture (throws if not cached)
393
- * @param url - Texture URL
394
- */
395
- getTexture(url: string): THREE.Texture;
396
- /**
397
- * Clear all caches
398
- */
399
- clearCache(): void;
400
- /**
401
- * Get cache statistics
402
- */
403
- getStats(): {
404
- models: number;
405
- textures: number;
406
- loading: number;
407
- };
408
- }
409
- declare const assetLoader: AssetLoader;
410
-
411
- type CameraMode = 'isometric' | 'perspective' | 'top-down';
412
- interface UseThreeOptions {
413
- /** Camera mode for viewing the scene */
414
- cameraMode?: CameraMode;
415
- /** Initial camera position [x, y, z] */
416
- cameraPosition?: [number, number, number];
417
- /** Background color */
418
- backgroundColor?: string;
419
- /** Enable shadows */
420
- shadows?: boolean;
421
- /** Enable grid helper */
422
- showGrid?: boolean;
423
- /** Grid size */
424
- gridSize?: number;
425
- /** Asset loader instance */
426
- assetLoader?: AssetLoader;
427
- }
428
- interface UseThreeReturn {
429
- /** Canvas element reference (for React Three Fiber) */
430
- canvasRef: React.RefObject<HTMLCanvasElement>;
431
- /** Three.js renderer */
432
- renderer: THREE.WebGLRenderer | null;
433
- /** Three.js scene */
434
- scene: THREE.Scene | null;
435
- /** Three.js camera */
436
- camera: THREE.Camera | null;
437
- /** Orbit controls */
438
- controls: OrbitControls | null;
439
- /** Is scene ready */
440
- isReady: boolean;
441
- /** Canvas dimensions */
442
- dimensions: {
443
- width: number;
444
- height: number;
445
- };
446
- /** Set camera position */
447
- setCameraPosition: (x: number, y: number, z: number) => void;
448
- /** Look at a specific point */
449
- lookAt: (x: number, y: number, z: number) => void;
450
- /** Reset camera to initial position */
451
- resetCamera: () => void;
452
- /** Fit view to bounds */
453
- fitView: (bounds: {
454
- minX: number;
455
- maxX: number;
456
- minZ: number;
457
- maxZ: number;
458
- }) => void;
459
- }
460
- /**
461
- * Hook for managing a Three.js scene
462
- * This is a lower-level hook used by GameCanvas3D
463
- */
464
- declare function useThree(options?: UseThreeOptions): UseThreeReturn;
465
-
466
- interface UseAssetLoaderOptions {
467
- /** URLs to preload on mount */
468
- preloadUrls?: string[];
469
- /** Asset loader instance (uses singleton if not provided) */
470
- loader?: AssetLoader;
471
- }
472
- interface AssetLoadingState {
473
- /** Whether assets are currently loading */
474
- isLoading: boolean;
475
- /** Loading progress (0-100) */
476
- progress: number;
477
- /** Number of loaded assets */
478
- loaded: number;
479
- /** Total assets to load */
480
- total: number;
481
- /** Any loading errors */
482
- errors: string[];
483
- }
484
- interface UseAssetLoaderReturn extends AssetLoadingState {
485
- /** Load a single model */
486
- loadModel: (url: string) => Promise<LoadedModel>;
487
- /** Load a single OBJ model */
488
- loadOBJ: (url: string) => Promise<THREE.Group>;
489
- /** Load a single texture */
490
- loadTexture: (url: string) => Promise<THREE.Texture>;
491
- /** Preload multiple assets */
492
- preload: (urls: string[]) => Promise<void>;
493
- /** Check if model is cached */
494
- hasModel: (url: string) => boolean;
495
- /** Check if texture is cached */
496
- hasTexture: (url: string) => boolean;
497
- /** Get cached model */
498
- getModel: (url: string) => LoadedModel | undefined;
499
- /** Get cached texture */
500
- getTexture: (url: string) => THREE.Texture | undefined;
501
- /** Clear all caches */
502
- clearCache: () => void;
503
- }
504
- /**
505
- * Hook for managing 3D asset loading in React components
506
- *
507
- * @example
508
- * ```tsx
509
- * const { loadModel, isLoading, progress } = useAssetLoader({
510
- * preloadUrls: ['/assets/model.glb']
511
- * });
512
- *
513
- * useEffect(() => {
514
- * loadModel('/assets/character.glb').then((model) => {
515
- * scene.add(model.scene);
516
- * });
517
- * }, []);
518
- * ```
519
- */
520
- declare function useAssetLoader(options?: UseAssetLoaderOptions): UseAssetLoaderReturn;
521
-
522
- type NodeType = 'tile' | 'unit' | 'feature' | 'highlight' | 'effect';
523
- interface SceneGraphNode {
524
- /** Unique node identifier */
525
- id: string;
526
- /** Node type classification */
527
- type: NodeType;
528
- /** Three.js object */
529
- mesh: THREE.Object3D;
530
- /** World position */
531
- position: {
532
- x: number;
533
- y: number;
534
- z: number;
535
- };
536
- /** Grid position */
537
- gridPosition: {
538
- x: number;
539
- z: number;
540
- };
541
- /** Optional metadata */
542
- metadata?: Record<string, unknown>;
543
- }
544
- interface UseSceneGraphReturn {
545
- /** Reference to the nodes map */
546
- nodesRef: React.MutableRefObject<Map<string, SceneGraphNode>>;
547
- /** Add a node to the scene */
548
- addNode: (node: SceneGraphNode) => void;
549
- /** Remove a node from the scene */
550
- removeNode: (id: string) => void;
551
- /** Get a node by ID */
552
- getNode: (id: string) => SceneGraphNode | undefined;
553
- /** Update node position */
554
- updateNodePosition: (id: string, x: number, y: number, z: number) => void;
555
- /** Update node grid position */
556
- updateNodeGridPosition: (id: string, gridX: number, gridZ: number) => void;
557
- /** Get node at grid position */
558
- getNodeAtGrid: (x: number, z: number, type?: NodeType) => SceneGraphNode | undefined;
559
- /** Get all nodes of a specific type */
560
- getNodesByType: (type: NodeType) => SceneGraphNode[];
561
- /** Get all nodes within a bounding box */
562
- getNodesInBounds: (minX: number, maxX: number, minZ: number, maxZ: number) => SceneGraphNode[];
563
- /** Clear all nodes */
564
- clearNodes: () => void;
565
- /** Count nodes by type */
566
- countNodes: (type?: NodeType) => number;
567
- }
568
- /**
569
- * Hook for managing the 3D scene graph
570
- *
571
- * @example
572
- * ```tsx
573
- * const { addNode, removeNode, getNodeAtGrid } = useSceneGraph();
574
- *
575
- * // Add a tile
576
- * addNode({
577
- * id: 'tile-0-0',
578
- * type: 'tile',
579
- * mesh: tileMesh,
580
- * position: { x: 0, y: 0, z: 0 },
581
- * gridPosition: { x: 0, z: 0 }
582
- * });
583
- * ```
584
- */
585
- declare function useSceneGraph(): UseSceneGraphReturn;
586
-
587
- interface RaycastHit {
588
- /** Intersected object */
589
- object: THREE.Object3D;
590
- /** Intersection point */
591
- point: THREE.Vector3;
592
- /** Distance from camera */
593
- distance: number;
594
- /** UV coordinates (if available) */
595
- uv?: THREE.Vector2;
596
- /** Face normal */
597
- face?: THREE.Face;
598
- /** Face index */
599
- faceIndex?: number;
600
- /** Instance ID (for instanced meshes) */
601
- instanceId?: number;
602
- }
603
- interface GridHit {
604
- /** Grid X coordinate */
605
- gridX: number;
606
- /** Grid Z coordinate */
607
- gridZ: number;
608
- /** World position */
609
- worldPosition: THREE.Vector3;
610
- /** Intersected object type */
611
- objectType?: 'tile' | 'unit' | 'feature';
612
- /** Object ID if available */
613
- objectId?: string;
614
- }
615
- interface UseRaycasterOptions {
616
- /** Camera reference */
617
- camera: THREE.Camera | null;
618
- /** Canvas element for coordinate conversion */
619
- canvas: HTMLCanvasElement | null;
620
- /** Grid cell size */
621
- cellSize?: number;
622
- /** Grid offset X */
623
- offsetX?: number;
624
- /** Grid offset Z */
625
- offsetZ?: number;
626
- }
627
- interface UseRaycasterReturn {
628
- /** Raycaster instance */
629
- raycaster: React.MutableRefObject<THREE.Raycaster>;
630
- /** Mouse vector instance */
631
- mouse: React.MutableRefObject<THREE.Vector2>;
632
- /** Get intersection at client coordinates */
633
- getIntersection: (clientX: number, clientY: number, objects: THREE.Object3D[]) => RaycastHit | null;
634
- /** Get all intersections at client coordinates */
635
- getAllIntersections: (clientX: number, clientY: number, objects: THREE.Object3D[]) => RaycastHit[];
636
- /** Get grid coordinates at client position */
637
- getGridCoordinates: (clientX: number, clientY: number) => {
638
- x: number;
639
- z: number;
640
- } | null;
641
- /** Get tile at client position from scene */
642
- getTileAtPosition: (clientX: number, clientY: number, scene: THREE.Scene) => GridHit | null;
643
- /** Convert client coordinates to normalized device coordinates */
644
- clientToNDC: (clientX: number, clientY: number) => {
645
- x: number;
646
- y: number;
647
- };
648
- /** Check if point is within canvas bounds */
649
- isWithinCanvas: (clientX: number, clientY: number) => boolean;
650
- }
651
- /**
652
- * Hook for 3D raycasting operations
653
- *
654
- * @example
655
- * ```tsx
656
- * const { getIntersection, getGridCoordinates } = useRaycaster({
657
- * camera,
658
- * canvas: canvasRef.current
659
- * });
660
- *
661
- * const handleClick = (e: MouseEvent) => {
662
- * const hit = getIntersection(e.clientX, e.clientY, tileMeshes);
663
- * if (hit) {
664
- * const grid = getGridCoordinates(e.clientX, e.clientY);
665
- * console.log('Clicked grid:', grid);
666
- * }
667
- * };
668
- * ```
669
- */
670
- declare function useRaycaster(options: UseRaycasterOptions): UseRaycasterReturn;
671
-
672
- interface GameCanvas3DEventConfig {
673
- /** Event name for tile clicks */
674
- tileClickEvent?: string;
675
- /** Event name for unit clicks */
676
- unitClickEvent?: string;
677
- /** Event name for feature clicks */
678
- featureClickEvent?: string;
679
- /** Event name for canvas clicks */
680
- canvasClickEvent?: string;
681
- /** Event name for tile hover */
682
- tileHoverEvent?: string;
683
- /** Event name for tile leave */
684
- tileLeaveEvent?: string;
685
- /** Event name for unit animation changes */
686
- unitAnimationEvent?: string;
687
- /** Event name for camera changes */
688
- cameraChangeEvent?: string;
689
- }
690
- interface UseGameCanvas3DEventsOptions extends GameCanvas3DEventConfig {
691
- /** Callback for tile clicks (direct) */
692
- onTileClick?: (tile: IsometricTile, event: React.MouseEvent) => void;
693
- /** Callback for unit clicks (direct) */
694
- onUnitClick?: (unit: IsometricUnit, event: React.MouseEvent) => void;
695
- /** Callback for feature clicks (direct) */
696
- onFeatureClick?: (feature: IsometricFeature, event: React.MouseEvent) => void;
697
- /** Callback for canvas clicks (direct) */
698
- onCanvasClick?: (event: React.MouseEvent) => void;
699
- /** Callback for tile hover (direct) */
700
- onTileHover?: (tile: IsometricTile | null, event: React.MouseEvent) => void;
701
- /** Callback for unit animation changes (direct) */
702
- onUnitAnimation?: (unitId: string, state: string) => void;
703
- }
704
- interface UseGameCanvas3DEventsReturn {
705
- /** Handle tile click - emits event and calls callback */
706
- handleTileClick: (tile: IsometricTile, event: React.MouseEvent) => void;
707
- /** Handle unit click - emits event and calls callback */
708
- handleUnitClick: (unit: IsometricUnit, event: React.MouseEvent) => void;
709
- /** Handle feature click - emits event and calls callback */
710
- handleFeatureClick: (feature: IsometricFeature, event: React.MouseEvent) => void;
711
- /** Handle canvas click - emits event and calls callback */
712
- handleCanvasClick: (event: React.MouseEvent) => void;
713
- /** Handle tile hover - emits event and calls callback */
714
- handleTileHover: (tile: IsometricTile | null, event: React.MouseEvent) => void;
715
- /** Handle unit animation - emits event and calls callback */
716
- handleUnitAnimation: (unitId: string, state: string) => void;
717
- /** Handle camera change - emits event */
718
- handleCameraChange: (position: {
719
- x: number;
720
- y: number;
721
- z: number;
722
- }) => void;
723
- }
724
- /**
725
- * Hook for integrating GameCanvas3D with the event bus
726
- *
727
- * Supports both declarative event props (tileClickEvent) and
728
- * direct callback props (onTileClick).
729
- *
730
- * @example
731
- * ```tsx
732
- * const events = useGameCanvas3DEvents({
733
- * tileClickEvent: 'TILE_SELECTED',
734
- * unitClickEvent: 'UNIT_SELECTED',
735
- * onTileClick: (tile) => console.log('Tile:', tile)
736
- * });
737
- *
738
- * // In component:
739
- * <TileRenderer onTileClick={events.handleTileClick} />
740
- * ```
741
- */
742
- declare function useGameCanvas3DEvents(options: UseGameCanvas3DEventsOptions): UseGameCanvas3DEventsReturn;
743
-
744
- interface TileRendererProps {
745
- /** Array of tiles to render */
746
- tiles: IsometricTile[];
747
- /** Grid cell size */
748
- cellSize?: number;
749
- /** Grid offset X */
750
- offsetX?: number;
751
- /** Grid offset Z */
752
- offsetZ?: number;
753
- /** Use instancing for performance */
754
- useInstancing?: boolean;
755
- /** Terrain color mapping */
756
- terrainColors?: Record<string, string>;
757
- /** Called when tile is clicked */
758
- onTileClick?: (tile: IsometricTile) => void;
759
- /** Called when tile is hovered */
760
- onTileHover?: (tile: IsometricTile | null) => void;
761
- /** Selected tile IDs */
762
- selectedTileIds?: string[];
763
- /** Valid move tile coordinates */
764
- validMoves?: Array<{
765
- x: number;
766
- z: number;
767
- }>;
768
- /** Attack target coordinates */
769
- attackTargets?: Array<{
770
- x: number;
771
- z: number;
772
- }>;
773
- }
774
- /**
775
- * TileRenderer Component
776
- *
777
- * Renders grid tiles with instancing for optimal performance.
778
- *
779
- * @example
780
- * ```tsx
781
- * <TileRenderer
782
- * tiles={tiles}
783
- * cellSize={1}
784
- * onTileClick={handleTileClick}
785
- * validMoves={[{ x: 1, z: 1 }]}
786
- * />
787
- * ```
788
- */
789
- declare function TileRenderer({ tiles, cellSize, offsetX, offsetZ, useInstancing, terrainColors, onTileClick, onTileHover, selectedTileIds, validMoves, attackTargets, }: TileRendererProps): JSX.Element;
790
-
791
- type UnitAnimationState = 'idle' | 'walk' | 'attack' | 'hurt' | 'die';
792
- interface UnitRendererProps {
793
- /** Array of units to render */
794
- units: IsometricUnit[];
795
- /** Grid cell size */
796
- cellSize?: number;
797
- /** Grid offset X */
798
- offsetX?: number;
799
- /** Grid offset Z */
800
- offsetZ?: number;
801
- /** Currently selected unit ID */
802
- selectedUnitId?: string | null;
803
- /** Called when unit is clicked */
804
- onUnitClick?: (unit: IsometricUnit) => void;
805
- /** Called when unit animation state changes */
806
- onAnimationStateChange?: (unitId: string, state: UnitAnimationState) => void;
807
- /** Animation speed multiplier */
808
- animationSpeed?: number;
809
- }
810
- /**
811
- * UnitRenderer Component
812
- *
813
- * Renders all units in the scene.
814
- *
815
- * @example
816
- * ```tsx
817
- * <UnitRenderer
818
- * units={units}
819
- * cellSize={1}
820
- * selectedUnitId="unit-1"
821
- * onUnitClick={handleUnitClick}
822
- * />
823
- * ```
824
- */
825
- declare function UnitRenderer({ units, cellSize, offsetX, offsetZ, selectedUnitId, onUnitClick, onAnimationStateChange, animationSpeed, }: UnitRendererProps): JSX.Element;
826
-
827
- interface FeatureRendererProps {
828
- /** Array of features to render */
829
- features: IsometricFeature[];
830
- /** Grid cell size */
831
- cellSize?: number;
832
- /** Grid offset X */
833
- offsetX?: number;
834
- /** Grid offset Z */
835
- offsetZ?: number;
836
- /** Called when feature is clicked */
837
- onFeatureClick?: (feature: IsometricFeature) => void;
838
- /** Called when feature is hovered */
839
- onFeatureHover?: (feature: IsometricFeature | null) => void;
840
- /** Selected feature IDs */
841
- selectedFeatureIds?: string[];
842
- /** Feature color overrides */
843
- featureColors?: Record<string, string>;
844
- }
845
- /**
846
- * FeatureRenderer Component
847
- *
848
- * Renders all features in the scene.
849
- *
850
- * @example
851
- * ```tsx
852
- * <FeatureRenderer
853
- * features={features}
854
- * cellSize={1}
855
- * onFeatureClick={handleFeatureClick}
856
- * />
857
- * ```
858
- */
859
- declare function FeatureRenderer({ features, cellSize, offsetX, offsetZ, onFeatureClick, onFeatureHover, selectedFeatureIds, featureColors, }: FeatureRendererProps): JSX.Element;
860
-
861
- interface FeatureRenderer3DProps {
862
- /** Array of features to render */
863
- features: IsometricFeature[];
864
- /** Grid cell size */
865
- cellSize?: number;
866
- /** Grid offset X */
867
- offsetX?: number;
868
- /** Grid offset Z */
869
- offsetZ?: number;
870
- /** Called when feature is clicked */
871
- onFeatureClick?: (feature: IsometricFeature) => void;
872
- /** Called when feature is hovered */
873
- onFeatureHover?: (feature: IsometricFeature | null) => void;
874
- /** Selected feature IDs */
875
- selectedFeatureIds?: string[];
876
- }
877
- /**
878
- * FeatureRenderer3D Component
879
- *
880
- * Renders 3D features with GLB model loading support.
881
- *
882
- * @example
883
- * ```tsx
884
- * <FeatureRenderer3D
885
- * features={[
886
- * { id: 'gate', x: 0, y: 0, type: 'gate', assetUrl: 'https://.../gate.glb' }
887
- * ]}
888
- * cellSize={1}
889
- * />
890
- * ```
891
- */
892
- declare function FeatureRenderer3D({ features, cellSize, offsetX, offsetZ, onFeatureClick, onFeatureHover, selectedFeatureIds, }: FeatureRenderer3DProps): JSX.Element;
893
-
894
- declare function preloadFeatures(urls: string[]): void;
895
-
896
- /**
897
- * Grid 3D Utilities
898
- *
899
- * Utility functions for 3D grid coordinate transformations,
900
- * raycasting, and spatial calculations for GameCanvas3D.
901
- *
902
- * @packageDocumentation
903
- */
904
-
905
- interface Grid3DConfig {
906
- /** Size of each grid cell */
907
- cellSize: number;
908
- /** Grid offset X */
909
- offsetX?: number;
910
- /** Grid offset Z */
911
- offsetZ?: number;
912
- /** Grid Y height (elevation) */
913
- elevation?: number;
914
- }
915
- interface GridCoordinate {
916
- x: number;
917
- y: number;
918
- z: number;
919
- }
920
- /**
921
- * Convert grid coordinates to world position
922
- * @param gridX - Grid X coordinate
923
- * @param gridZ - Grid Z coordinate
924
- * @param config - Grid configuration
925
- * @returns World position vector
926
- */
927
- declare function gridToWorld(gridX: number, gridZ: number, config?: Grid3DConfig): THREE.Vector3;
928
- /**
929
- * Convert world position to grid coordinates
930
- * @param worldX - World X position
931
- * @param worldZ - World Z position
932
- * @param config - Grid configuration
933
- * @returns Grid coordinates
934
- */
935
- declare function worldToGrid(worldX: number, worldZ: number, config?: Grid3DConfig): {
936
- x: number;
937
- z: number;
938
- };
939
- /**
940
- * Raycast from camera through mouse position to find grid intersection
941
- * @param camera - Three.js camera
942
- * @param mouseX - Mouse X position (normalized -1 to 1)
943
- * @param mouseY - Mouse Y position (normalized -1 to 1)
944
- * @param planeY - Y height of the intersection plane (default: 0)
945
- * @returns Intersection point or null
946
- */
947
- declare function raycastToPlane(camera: THREE.Camera, mouseX: number, mouseY: number, planeY?: number): THREE.Vector3 | null;
948
- /**
949
- * Raycast from camera through mouse position against a set of objects
950
- * @param camera - Three.js camera
951
- * @param mouseX - Mouse X position (normalized -1 to 1)
952
- * @param mouseY - Mouse Y position (normalized -1 to 1)
953
- * @param objects - Array of objects to test
954
- * @returns First intersection or null
955
- */
956
- declare function raycastToObjects(camera: THREE.Camera, mouseX: number, mouseY: number, objects: THREE.Object3D[]): THREE.Intersection | null;
957
- /**
958
- * Calculate distance between two grid coordinates
959
- * @param a - First grid coordinate
960
- * @param b - Second grid coordinate
961
- * @returns Distance in grid units
962
- */
963
- declare function gridDistance(a: {
964
- x: number;
965
- z: number;
966
- }, b: {
967
- x: number;
968
- z: number;
969
- }): number;
970
- /**
971
- * Calculate Manhattan distance between two grid coordinates
972
- * @param a - First grid coordinate
973
- * @param b - Second grid coordinate
974
- * @returns Manhattan distance
975
- */
976
- declare function gridManhattanDistance(a: {
977
- x: number;
978
- z: number;
979
- }, b: {
980
- x: number;
981
- z: number;
982
- }): number;
983
- /**
984
- * Get neighboring grid cells
985
- * @param x - Center X coordinate
986
- * @param z - Center Z coordinate
987
- * @param includeDiagonal - Whether to include diagonal neighbors
988
- * @returns Array of neighbor coordinates
989
- */
990
- declare function getNeighbors(x: number, z: number, includeDiagonal?: boolean): {
991
- x: number;
992
- z: number;
993
- }[];
994
- /**
995
- * Check if a grid coordinate is within bounds
996
- * @param x - X coordinate
997
- * @param z - Z coordinate
998
- * @param bounds - Bounds object
999
- * @returns Whether the coordinate is within bounds
1000
- */
1001
- declare function isInBounds(x: number, z: number, bounds: {
1002
- minX: number;
1003
- maxX: number;
1004
- minZ: number;
1005
- maxZ: number;
1006
- }): boolean;
1007
- /**
1008
- * Get all grid cells within a circular radius
1009
- * @param centerX - Center X coordinate
1010
- * @param centerZ - Center Z coordinate
1011
- * @param radius - Radius in grid units
1012
- * @returns Array of coordinates within radius
1013
- */
1014
- declare function getCellsInRadius(centerX: number, centerZ: number, radius: number): {
1015
- x: number;
1016
- z: number;
1017
- }[];
1018
- /**
1019
- * Create a highlight mesh for grid cells
1020
- * @param color - Highlight color
1021
- * @param opacity - Opacity (0-1)
1022
- * @returns Mesh that can be positioned at grid cells
1023
- */
1024
- declare function createGridHighlight(color?: number, opacity?: number): THREE.Mesh;
1025
- /**
1026
- * Normalize mouse coordinates to NDC (-1 to 1)
1027
- * @param clientX - Mouse client X
1028
- * @param clientY - Mouse client Y
1029
- * @param element - Canvas element
1030
- * @returns Normalized coordinates
1031
- */
1032
- declare function normalizeMouseCoordinates(clientX: number, clientY: number, element: HTMLElement): {
1033
- x: number;
1034
- y: number;
1035
- };
1036
-
1037
- /**
1038
- * Culling Utilities
1039
- *
1040
- * Frustum culling and LOD (Level of Detail) management for 3D scene optimization.
1041
- *
1042
- * @packageDocumentation
1043
- */
1044
-
1045
- interface CullingOptions {
1046
- /** Camera frustum for culling */
1047
- camera: THREE.Camera;
1048
- /** Optional padding around frustum */
1049
- padding?: number;
1050
- }
1051
- interface LODLevel {
1052
- /** Distance threshold for this LOD level */
1053
- distance: number;
1054
- /** Geometry or mesh for this level */
1055
- geometry?: THREE.BufferGeometry;
1056
- /** Scale multiplier for this level */
1057
- scale?: number;
1058
- /** Whether to use simplified material */
1059
- simpleMaterial?: boolean;
1060
- }
1061
- interface LODConfig {
1062
- /** LOD levels from closest to farthest */
1063
- levels: LODLevel[];
1064
- /** Transition smoothness (0-1) */
1065
- transitionSmoothness?: number;
1066
- }
1067
- /**
1068
- * Frustum culling check for a position
1069
- * @param position - World position to check
1070
- * @param camera - Camera to check against
1071
- * @param padding - Optional padding in world units
1072
- * @returns Whether the position is within the frustum
1073
- */
1074
- declare function isInFrustum(position: THREE.Vector3, camera: THREE.Camera, padding?: number): boolean;
1075
- /**
1076
- * Filter an array of positions to only those within the frustum
1077
- * @param positions - Array of world positions
1078
- * @param camera - Camera to check against
1079
- * @param padding - Optional padding in world units
1080
- * @returns Array of positions within frustum
1081
- */
1082
- declare function filterByFrustum(positions: THREE.Vector3[], camera: THREE.Camera, padding?: number): THREE.Vector3[];
1083
- /**
1084
- * Get indices of visible items from an array
1085
- * @param positions - Array of world positions
1086
- * @param camera - Camera to check against
1087
- * @param padding - Optional padding in world units
1088
- * @returns Set of visible indices
1089
- */
1090
- declare function getVisibleIndices(positions: THREE.Vector3[], camera: THREE.Camera, padding?: number): Set<number>;
1091
- /**
1092
- * Calculate LOD level based on distance from camera
1093
- * @param position - Object position
1094
- * @param camera - Camera position
1095
- * @param lodLevels - Array of distance thresholds (sorted closest to farthest)
1096
- * @returns Index of the LOD level to use
1097
- */
1098
- declare function calculateLODLevel(position: THREE.Vector3, camera: THREE.Camera, lodLevels: number[]): number;
1099
- /**
1100
- * Create a distance-based LOD system for an instanced mesh
1101
- * @param instancedMesh - The instanced mesh to manage
1102
- * @param positions - Array of instance positions
1103
- * @param camera - Camera to calculate distances from
1104
- * @param lodDistances - Distance thresholds for LOD levels
1105
- * @returns Array of LOD indices for each instance
1106
- */
1107
- declare function updateInstanceLOD(instancedMesh: THREE.InstancedMesh, positions: THREE.Vector3[], camera: THREE.Camera, lodDistances: number[]): Uint8Array;
1108
- /**
1109
- * Create visibility data for instanced mesh culling
1110
- * Updates the instance matrix to hide/show instances
1111
- * @param instancedMesh - The instanced mesh
1112
- * @param positions - Array of instance positions
1113
- * @param visibleIndices - Set of visible indices
1114
- * @returns Updated count of visible instances
1115
- */
1116
- declare function cullInstancedMesh(instancedMesh: THREE.InstancedMesh, positions: THREE.Vector3[], visibleIndices: Set<number>): number;
1117
- /**
1118
- * Spatial hash grid for efficient object queries
1119
- */
1120
- declare class SpatialHashGrid {
1121
- private cellSize;
1122
- private cells;
1123
- private objectPositions;
1124
- constructor(cellSize?: number);
1125
- /**
1126
- * Get cell key for a position
1127
- */
1128
- private getCellKey;
1129
- /**
1130
- * Insert an object into the grid
1131
- */
1132
- insert(id: string, position: THREE.Vector3): void;
1133
- /**
1134
- * Remove an object from the grid
1135
- */
1136
- remove(id: string): void;
1137
- /**
1138
- * Update an object's position
1139
- */
1140
- update(id: string, newPosition: THREE.Vector3): void;
1141
- /**
1142
- * Query objects within a radius of a position
1143
- */
1144
- queryRadius(center: THREE.Vector3, radius: number): string[];
1145
- /**
1146
- * Query objects within a bounding box
1147
- */
1148
- queryBox(minX: number, maxX: number, minZ: number, maxZ: number): string[];
1149
- /**
1150
- * Clear all objects from the grid
1151
- */
1152
- clear(): void;
1153
- /**
1154
- * Get statistics about the grid
1155
- */
1156
- getStats(): {
1157
- objects: number;
1158
- cells: number;
1159
- };
1160
- }
1161
-
1162
- export { AssetLoader, type AssetLoadingState, Camera3D, type Camera3DHandle, type Camera3DProps, type CameraMode$1 as CameraMode, Canvas3DErrorBoundary, type Canvas3DErrorBoundaryProps, type Canvas3DErrorBoundaryState, Canvas3DLoadingState, type Canvas3DLoadingStateProps, type CullingOptions, FeatureRenderer, FeatureRenderer3D, type FeatureRenderer3DProps, type FeatureRendererProps, type GameCanvas3DEventConfig, type Grid3DConfig, type GridCoordinate, type GridHit, type LODConfig, type LODLevel, Lighting3D, type Lighting3DProps, type LoadedModel, ModelLoader, type ModelLoaderProps, type NodeType, type Physics3DState, PhysicsObject3D, type PhysicsObject3DProps, type RaycastHit, Scene3D, type Scene3DProps, type SceneGraphNode, SpatialHashGrid, TileRenderer, type TileRendererProps, type UnitAnimationState, UnitRenderer, type UnitRendererProps, type UseAssetLoaderOptions, type UseAssetLoaderReturn, type UseGameCanvas3DEventsOptions, type UseGameCanvas3DEventsReturn, type UseRaycasterOptions, type UseRaycasterReturn, type UseSceneGraphReturn, type UseThreeOptions, type UseThreeReturn, assetLoader, calculateLODLevel, createGridHighlight, cullInstancedMesh, filterByFrustum, getCellsInRadius, getNeighbors, getVisibleIndices, gridDistance, gridManhattanDistance, gridToWorld, isInBounds, isInFrustum, normalizeMouseCoordinates, preloadFeatures, raycastToObjects, raycastToPlane, updateInstanceLOD, useAssetLoader, useGameCanvas3DEvents, usePhysics3DController, useRaycaster, useSceneGraph, useThree, worldToGrid };