@chocozhang/three-model-render 1.0.3 → 1.0.5
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/CHANGELOG.md +39 -0
- package/README.md +134 -97
- package/dist/camera/index.d.ts +59 -36
- package/dist/camera/index.js +83 -67
- package/dist/camera/index.js.map +1 -1
- package/dist/camera/index.mjs +83 -67
- package/dist/camera/index.mjs.map +1 -1
- package/dist/core/index.d.ts +81 -28
- package/dist/core/index.js +194 -104
- package/dist/core/index.js.map +1 -1
- package/dist/core/index.mjs +194 -105
- package/dist/core/index.mjs.map +1 -1
- package/dist/effect/index.d.ts +47 -134
- package/dist/effect/index.js +287 -288
- package/dist/effect/index.js.map +1 -1
- package/dist/effect/index.mjs +287 -288
- package/dist/effect/index.mjs.map +1 -1
- package/dist/index.d.ts +432 -349
- package/dist/index.js +1399 -1228
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1395 -1229
- package/dist/index.mjs.map +1 -1
- package/dist/interaction/index.d.ts +85 -52
- package/dist/interaction/index.js +168 -142
- package/dist/interaction/index.js.map +1 -1
- package/dist/interaction/index.mjs +168 -142
- package/dist/interaction/index.mjs.map +1 -1
- package/dist/loader/index.d.ts +106 -58
- package/dist/loader/index.js +492 -454
- package/dist/loader/index.js.map +1 -1
- package/dist/loader/index.mjs +491 -455
- package/dist/loader/index.mjs.map +1 -1
- package/dist/setup/index.d.ts +26 -24
- package/dist/setup/index.js +125 -163
- package/dist/setup/index.js.map +1 -1
- package/dist/setup/index.mjs +124 -164
- package/dist/setup/index.mjs.map +1 -1
- package/dist/ui/index.d.ts +18 -7
- package/dist/ui/index.js +45 -37
- package/dist/ui/index.js.map +1 -1
- package/dist/ui/index.mjs +45 -37
- package/dist/ui/index.mjs.map +1 -1
- package/package.json +50 -22
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,17 @@ import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
|
|
|
3
3
|
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
|
|
4
4
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* @file labelManager.ts
|
|
8
|
+
* @description
|
|
9
|
+
* Manages HTML labels attached to 3D objects. Efficiently updates label positions based on camera movement.
|
|
10
|
+
*
|
|
11
|
+
* @best-practice
|
|
12
|
+
* - Use `addChildModelLabels` to label parts of a loaded model.
|
|
13
|
+
* - Labels are HTML elements overlaid on the canvas.
|
|
14
|
+
* - Supports performance optimization via caching and visibility culling.
|
|
15
|
+
*/
|
|
16
|
+
|
|
6
17
|
interface LabelOptions$1 {
|
|
7
18
|
fontSize?: string;
|
|
8
19
|
color?: string;
|
|
@@ -19,23 +30,34 @@ interface LabelManager$1 {
|
|
|
19
30
|
isRunning: () => boolean;
|
|
20
31
|
}
|
|
21
32
|
/**
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
* -
|
|
26
|
-
* -
|
|
27
|
-
* -
|
|
28
|
-
* -
|
|
29
|
-
*
|
|
30
|
-
* @param camera THREE.Camera -
|
|
31
|
-
* @param renderer THREE.WebGLRenderer -
|
|
32
|
-
* @param parentModel THREE.Object3D - FBX
|
|
33
|
-
* @param modelLabelsMap Record<string,string> -
|
|
34
|
-
* @param options LabelOptions -
|
|
35
|
-
* @returns LabelManager -
|
|
33
|
+
* Add overhead labels to child models (supports Mesh and Group)
|
|
34
|
+
*
|
|
35
|
+
* Features:
|
|
36
|
+
* - Caches bounding boxes to avoid repetitive calculation every frame
|
|
37
|
+
* - Supports pause/resume
|
|
38
|
+
* - Configurable update interval to reduce CPU usage
|
|
39
|
+
* - Automatically pauses when hidden
|
|
40
|
+
*
|
|
41
|
+
* @param camera THREE.Camera - Scene camera
|
|
42
|
+
* @param renderer THREE.WebGLRenderer - Renderer, used for screen size
|
|
43
|
+
* @param parentModel THREE.Object3D - FBX root node or Group
|
|
44
|
+
* @param modelLabelsMap Record<string,string> - Map of model name to label text
|
|
45
|
+
* @param options LabelOptions - Optional label style configuration
|
|
46
|
+
* @returns LabelManager - Management interface containing pause/resume/dispose
|
|
36
47
|
*/
|
|
37
48
|
declare function addChildModelLabels(camera: THREE.Camera, renderer: THREE.WebGLRenderer, parentModel: THREE.Object3D, modelLabelsMap: Record<string, string>, options?: LabelOptions$1): LabelManager$1;
|
|
38
49
|
|
|
50
|
+
/**
|
|
51
|
+
* @file hoverEffect.ts
|
|
52
|
+
* @description
|
|
53
|
+
* Singleton highlight effect manager. Uses OutlinePass to create a breathing highlight effect on hovered objects.
|
|
54
|
+
*
|
|
55
|
+
* @best-practice
|
|
56
|
+
* - Initialize once in your setup/mounted hook.
|
|
57
|
+
* - Call `updateHighlightNames` to filter which objects are interactive.
|
|
58
|
+
* - Automatically handles mousemove throttling and cleanup on dispose.
|
|
59
|
+
*/
|
|
60
|
+
|
|
39
61
|
type HoverBreathOptions = {
|
|
40
62
|
camera: THREE.Camera;
|
|
41
63
|
scene: THREE.Scene;
|
|
@@ -48,13 +70,13 @@ type HoverBreathOptions = {
|
|
|
48
70
|
throttleDelay?: number;
|
|
49
71
|
};
|
|
50
72
|
/**
|
|
51
|
-
*
|
|
52
|
-
*
|
|
73
|
+
* Create a singleton highlighter - Recommended to create once on mount
|
|
74
|
+
* Returns { updateHighlightNames, dispose, getHoveredName } interface
|
|
53
75
|
*
|
|
54
|
-
*
|
|
55
|
-
* -
|
|
56
|
-
* - mousemove
|
|
57
|
-
* -
|
|
76
|
+
* Features:
|
|
77
|
+
* - Automatically pauses animation when no object is hovered
|
|
78
|
+
* - Throttles mousemove events to avoid excessive calculation
|
|
79
|
+
* - Uses passive event listeners to improve scrolling performance
|
|
58
80
|
*/
|
|
59
81
|
declare function enableHoverBreath(opts: HoverBreathOptions): {
|
|
60
82
|
updateHighlightNames: (names: string[] | null) => void;
|
|
@@ -64,7 +86,18 @@ declare function enableHoverBreath(opts: HoverBreathOptions): {
|
|
|
64
86
|
};
|
|
65
87
|
|
|
66
88
|
/**
|
|
67
|
-
*
|
|
89
|
+
* @file postProcessing.ts
|
|
90
|
+
* @description
|
|
91
|
+
* Manages the post-processing chain, specifically for Outline effects and Gamma correction.
|
|
92
|
+
*
|
|
93
|
+
* @best-practice
|
|
94
|
+
* - call `initPostProcessing` after creating your renderer and scene.
|
|
95
|
+
* - Use the returned `composer` in your render loop instead of `renderer.render`.
|
|
96
|
+
* - Handles resizing automatically via the `resize` method.
|
|
97
|
+
*/
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Post-processing configuration options
|
|
68
101
|
*/
|
|
69
102
|
interface PostProcessingOptions {
|
|
70
103
|
edgeStrength?: number;
|
|
@@ -75,7 +108,7 @@ interface PostProcessingOptions {
|
|
|
75
108
|
resolutionScale?: number;
|
|
76
109
|
}
|
|
77
110
|
/**
|
|
78
|
-
*
|
|
111
|
+
* Post-processing management interface
|
|
79
112
|
*/
|
|
80
113
|
interface PostProcessingManager {
|
|
81
114
|
composer: EffectComposer;
|
|
@@ -84,23 +117,54 @@ interface PostProcessingManager {
|
|
|
84
117
|
dispose: () => void;
|
|
85
118
|
}
|
|
86
119
|
/**
|
|
87
|
-
*
|
|
120
|
+
* Initialize outline-related information (contains OutlinePass)
|
|
88
121
|
*
|
|
89
|
-
*
|
|
90
|
-
* -
|
|
91
|
-
* -
|
|
92
|
-
* -
|
|
122
|
+
* Capabilities:
|
|
123
|
+
* - Supports automatic update on window resize
|
|
124
|
+
* - Configurable resolution scale for performance improvement
|
|
125
|
+
* - Comprehensive resource disposal management
|
|
93
126
|
*
|
|
94
127
|
* @param renderer THREE.WebGLRenderer
|
|
95
128
|
* @param scene THREE.Scene
|
|
96
129
|
* @param camera THREE.Camera
|
|
97
|
-
* @param options PostProcessingOptions -
|
|
98
|
-
* @returns PostProcessingManager -
|
|
130
|
+
* @param options PostProcessingOptions - Optional configuration
|
|
131
|
+
* @returns PostProcessingManager - Management interface containing composer/outlinePass/resize/dispose
|
|
99
132
|
*/
|
|
100
133
|
declare function initPostProcessing(renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera, options?: PostProcessingOptions): PostProcessingManager;
|
|
101
134
|
|
|
102
135
|
/**
|
|
103
|
-
*
|
|
136
|
+
* ResourceManager
|
|
137
|
+
* Handles tracking and disposal of Three.js objects to prevent memory leaks.
|
|
138
|
+
*/
|
|
139
|
+
declare class ResourceManager {
|
|
140
|
+
private geometries;
|
|
141
|
+
private materials;
|
|
142
|
+
private textures;
|
|
143
|
+
private objects;
|
|
144
|
+
/**
|
|
145
|
+
* Track an object and its resources recursively
|
|
146
|
+
*/
|
|
147
|
+
track(object: THREE.Object3D): THREE.Object3D;
|
|
148
|
+
private trackMaterial;
|
|
149
|
+
/**
|
|
150
|
+
* Dispose all tracked resources
|
|
151
|
+
*/
|
|
152
|
+
dispose(): void;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* @file clickHandler.ts
|
|
157
|
+
* @description
|
|
158
|
+
* Tool for handling model clicks and highlighting (OutlinePass version).
|
|
159
|
+
*
|
|
160
|
+
* @best-practice
|
|
161
|
+
* - Use `createModelClickHandler` to setup interaction.
|
|
162
|
+
* - Handles debouncing and click threshold automatically.
|
|
163
|
+
* - Cleanup using the returned dispose function.
|
|
164
|
+
*/
|
|
165
|
+
|
|
166
|
+
/**
|
|
167
|
+
* Click Handler Options
|
|
104
168
|
*/
|
|
105
169
|
interface ClickHandlerOptions {
|
|
106
170
|
clickThreshold?: number;
|
|
@@ -115,21 +179,21 @@ interface ClickHandlerOptions {
|
|
|
115
179
|
maxThickness?: number;
|
|
116
180
|
}
|
|
117
181
|
/**
|
|
118
|
-
*
|
|
119
|
-
*
|
|
120
|
-
*
|
|
121
|
-
* -
|
|
122
|
-
* -
|
|
123
|
-
* -
|
|
124
|
-
* -
|
|
125
|
-
*
|
|
126
|
-
* @param camera
|
|
127
|
-
* @param scene
|
|
128
|
-
* @param renderer
|
|
129
|
-
* @param outlinePass
|
|
130
|
-
* @param onClick
|
|
131
|
-
* @param options
|
|
132
|
-
* @returns
|
|
182
|
+
* Create Model Click Highlight Tool (OutlinePass Version) - Optimized
|
|
183
|
+
*
|
|
184
|
+
* Features:
|
|
185
|
+
* - Uses AbortController to unify event lifecycle management
|
|
186
|
+
* - Supports debounce to avoid frequent triggering
|
|
187
|
+
* - Customizable Raycaster parameters
|
|
188
|
+
* - Dynamically adjusts outline thickness based on camera distance
|
|
189
|
+
*
|
|
190
|
+
* @param camera Camera
|
|
191
|
+
* @param scene Scene
|
|
192
|
+
* @param renderer Renderer
|
|
193
|
+
* @param outlinePass Initialized OutlinePass
|
|
194
|
+
* @param onClick Click callback
|
|
195
|
+
* @param options Optional configuration
|
|
196
|
+
* @returns Dispose function, used to clean up events and resources
|
|
133
197
|
*/
|
|
134
198
|
declare function createModelClickHandler(camera: THREE.Camera, scene: THREE.Scene, renderer: THREE.WebGLRenderer, outlinePass: OutlinePass, onClick: (object: THREE.Object3D | null, info?: {
|
|
135
199
|
name?: string;
|
|
@@ -137,17 +201,28 @@ declare function createModelClickHandler(camera: THREE.Camera, scene: THREE.Scen
|
|
|
137
201
|
uuid?: string;
|
|
138
202
|
}) => void, options?: ClickHandlerOptions): () => void;
|
|
139
203
|
|
|
204
|
+
/**
|
|
205
|
+
* @file arrowGuide.ts
|
|
206
|
+
* @description
|
|
207
|
+
* Arrow guide effect tool, supports highlighting models and fading other objects.
|
|
208
|
+
*
|
|
209
|
+
* @best-practice
|
|
210
|
+
* - Use `highlight` to focus on specific models.
|
|
211
|
+
* - Automatically manages materials and memory using WeakMap.
|
|
212
|
+
* - Call `dispose` when component unmounts.
|
|
213
|
+
*/
|
|
214
|
+
|
|
140
215
|
type FilterFn = (obj: THREE.Object3D) => boolean;
|
|
141
216
|
/**
|
|
142
|
-
* ArrowGuide -
|
|
143
|
-
*
|
|
144
|
-
*
|
|
145
|
-
*
|
|
146
|
-
* -
|
|
147
|
-
* -
|
|
148
|
-
* -
|
|
149
|
-
* -
|
|
150
|
-
* -
|
|
217
|
+
* ArrowGuide - Optimized Version
|
|
218
|
+
* Arrow guide effect tool, supports highlighting models and fading other objects.
|
|
219
|
+
*
|
|
220
|
+
* Features:
|
|
221
|
+
* - Uses WeakMap for automatic material recycling, preventing memory leaks
|
|
222
|
+
* - Uses AbortController to manage event lifecycle
|
|
223
|
+
* - Adds material reuse mechanism to reuse materials
|
|
224
|
+
* - Improved dispose logic ensuring complete resource release
|
|
225
|
+
* - Adds error handling and boundary checks
|
|
151
226
|
*/
|
|
152
227
|
declare class ArrowGuide {
|
|
153
228
|
private renderer;
|
|
@@ -176,44 +251,55 @@ declare class ArrowGuide {
|
|
|
176
251
|
private makeFadedClone;
|
|
177
252
|
private createFadedMaterialFrom;
|
|
178
253
|
/**
|
|
179
|
-
*
|
|
254
|
+
* Set Arrow Mesh
|
|
180
255
|
*/
|
|
181
256
|
setArrowMesh(mesh: THREE.Mesh): void;
|
|
182
257
|
/**
|
|
183
|
-
*
|
|
258
|
+
* Highlight specified models
|
|
184
259
|
*/
|
|
185
260
|
highlight(models: THREE.Object3D[]): void;
|
|
186
261
|
private applyHighlight;
|
|
187
262
|
restore(): void;
|
|
188
263
|
/**
|
|
189
|
-
*
|
|
264
|
+
* Animation update (called every frame)
|
|
190
265
|
*/
|
|
191
266
|
animate(): void;
|
|
192
267
|
/**
|
|
193
|
-
*
|
|
268
|
+
* Initialize event listeners
|
|
194
269
|
*/
|
|
195
270
|
private initEvents;
|
|
196
271
|
/**
|
|
197
|
-
*
|
|
272
|
+
* Dispose all resources
|
|
198
273
|
*/
|
|
199
274
|
dispose(): void;
|
|
200
275
|
}
|
|
201
276
|
|
|
277
|
+
/**
|
|
278
|
+
* @file liquidFiller.ts
|
|
279
|
+
* @description
|
|
280
|
+
* Liquid filling effect for single or multiple models using local clipping planes.
|
|
281
|
+
*
|
|
282
|
+
* @best-practice
|
|
283
|
+
* - Use `fillTo` to animate liquid level.
|
|
284
|
+
* - Supports multiple independent liquid levels.
|
|
285
|
+
* - Call `dispose` to clean up resources and event listeners.
|
|
286
|
+
*/
|
|
287
|
+
|
|
202
288
|
interface LiquidFillerOptions {
|
|
203
289
|
color?: number;
|
|
204
290
|
opacity?: number;
|
|
205
291
|
speed?: number;
|
|
206
292
|
}
|
|
207
293
|
/**
|
|
208
|
-
* LiquidFillerGroup -
|
|
209
|
-
*
|
|
210
|
-
*
|
|
211
|
-
*
|
|
212
|
-
* -
|
|
213
|
-
* -
|
|
214
|
-
* -
|
|
215
|
-
* -
|
|
216
|
-
* -
|
|
294
|
+
* LiquidFillerGroup - Optimized
|
|
295
|
+
* Supports single or multi-model liquid level animation with independent color control.
|
|
296
|
+
*
|
|
297
|
+
* Features:
|
|
298
|
+
* - Uses renderer.domElement instead of window events
|
|
299
|
+
* - Uses AbortController to manage event lifecycle
|
|
300
|
+
* - Adds error handling and boundary checks
|
|
301
|
+
* - Optimized animation management to prevent memory leaks
|
|
302
|
+
* - Comprehensive resource disposal logic
|
|
217
303
|
*/
|
|
218
304
|
declare class LiquidFillerGroup {
|
|
219
305
|
private items;
|
|
@@ -225,35 +311,47 @@ declare class LiquidFillerGroup {
|
|
|
225
311
|
private clickThreshold;
|
|
226
312
|
private abortController;
|
|
227
313
|
/**
|
|
228
|
-
*
|
|
229
|
-
* @param models
|
|
230
|
-
* @param scene
|
|
231
|
-
* @param camera
|
|
232
|
-
* @param renderer
|
|
233
|
-
* @param defaultOptions
|
|
234
|
-
* @param clickThreshold
|
|
314
|
+
* Constructor
|
|
315
|
+
* @param models Single or multiple THREE.Object3D
|
|
316
|
+
* @param scene Scene
|
|
317
|
+
* @param camera Camera
|
|
318
|
+
* @param renderer Renderer
|
|
319
|
+
* @param defaultOptions Default liquid options
|
|
320
|
+
* @param clickThreshold Click threshold in pixels
|
|
235
321
|
*/
|
|
236
322
|
constructor(models: THREE.Object3D | THREE.Object3D[], scene: THREE.Scene, camera: THREE.Camera, renderer: THREE.WebGLRenderer, defaultOptions?: LiquidFillerOptions, clickThreshold?: number);
|
|
237
|
-
/** pointerdown
|
|
323
|
+
/** pointerdown record position */
|
|
238
324
|
private handlePointerDown;
|
|
239
|
-
/** pointerup
|
|
325
|
+
/** pointerup check click blank, restore original material */
|
|
240
326
|
private handlePointerUp;
|
|
241
327
|
/**
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
328
|
+
* Set liquid level
|
|
329
|
+
* @param models Single model or array of models
|
|
330
|
+
* @param percent Liquid level percentage 0~1
|
|
331
|
+
*/
|
|
246
332
|
fillTo(models: THREE.Object3D | THREE.Object3D[], percent: number): void;
|
|
247
|
-
/**
|
|
333
|
+
/** Set multiple model levels, percentList corresponds to items order */
|
|
248
334
|
fillToAll(percentList: number[]): void;
|
|
249
|
-
/**
|
|
335
|
+
/** Restore single model original material and remove liquid */
|
|
250
336
|
restore(model: THREE.Object3D): void;
|
|
251
|
-
/**
|
|
337
|
+
/** Restore all models */
|
|
252
338
|
restoreAll(): void;
|
|
253
|
-
/**
|
|
339
|
+
/** Dispose method, release events and resources */
|
|
254
340
|
dispose(): void;
|
|
255
341
|
}
|
|
256
342
|
|
|
343
|
+
/**
|
|
344
|
+
* @file followModels.ts
|
|
345
|
+
* @description
|
|
346
|
+
* Camera utility to automatically follow and focus on 3D models.
|
|
347
|
+
* It smoothly moves the camera to an optimal viewing position relative to the target object(s).
|
|
348
|
+
*
|
|
349
|
+
* @best-practice
|
|
350
|
+
* - Use `followModels` to focus on a newly selected object.
|
|
351
|
+
* - Call `cancelFollow` before starting a new manual camera interaction if needed.
|
|
352
|
+
* - Adjust `padding` to control how tight the camera framing is.
|
|
353
|
+
*/
|
|
354
|
+
|
|
257
355
|
interface FollowOptions {
|
|
258
356
|
duration?: number;
|
|
259
357
|
padding?: number;
|
|
@@ -269,72 +367,83 @@ interface FollowOptions {
|
|
|
269
367
|
onProgress?: (progress: number) => void;
|
|
270
368
|
}
|
|
271
369
|
/**
|
|
272
|
-
*
|
|
370
|
+
* Recommended camera angles for quick selection of common views
|
|
273
371
|
*/
|
|
274
372
|
declare const FOLLOW_ANGLES: {
|
|
275
|
-
/**
|
|
373
|
+
/** Isometric view (default) - suitable for architecture, mechanical equipment */
|
|
276
374
|
readonly ISOMETRIC: {
|
|
277
375
|
readonly azimuth: number;
|
|
278
376
|
readonly elevation: number;
|
|
279
377
|
};
|
|
280
|
-
/**
|
|
378
|
+
/** Front view - suitable for frontal display, UI alignment */
|
|
281
379
|
readonly FRONT: {
|
|
282
380
|
readonly azimuth: 0;
|
|
283
381
|
readonly elevation: 0;
|
|
284
382
|
};
|
|
285
|
-
/**
|
|
383
|
+
/** Right view - suitable for mechanical sections, side inspection */
|
|
286
384
|
readonly RIGHT: {
|
|
287
385
|
readonly azimuth: number;
|
|
288
386
|
readonly elevation: 0;
|
|
289
387
|
};
|
|
290
|
-
/**
|
|
388
|
+
/** Left view */
|
|
291
389
|
readonly LEFT: {
|
|
292
390
|
readonly azimuth: number;
|
|
293
391
|
readonly elevation: 0;
|
|
294
392
|
};
|
|
295
|
-
/**
|
|
393
|
+
/** Back view */
|
|
296
394
|
readonly BACK: {
|
|
297
395
|
readonly azimuth: number;
|
|
298
396
|
readonly elevation: 0;
|
|
299
397
|
};
|
|
300
|
-
/**
|
|
398
|
+
/** Top view - suitable for maps, layout display */
|
|
301
399
|
readonly TOP: {
|
|
302
400
|
readonly azimuth: 0;
|
|
303
401
|
readonly elevation: number;
|
|
304
402
|
};
|
|
305
|
-
/**
|
|
403
|
+
/** Low angle view - suitable for vehicles, characters near the ground */
|
|
306
404
|
readonly LOW_ANGLE: {
|
|
307
405
|
readonly azimuth: number;
|
|
308
406
|
readonly elevation: number;
|
|
309
407
|
};
|
|
310
|
-
/**
|
|
408
|
+
/** High angle view - suitable for bird's eye view, panoramic browsing */
|
|
311
409
|
readonly HIGH_ANGLE: {
|
|
312
410
|
readonly azimuth: number;
|
|
313
411
|
readonly elevation: number;
|
|
314
412
|
};
|
|
315
413
|
};
|
|
316
414
|
/**
|
|
317
|
-
*
|
|
318
|
-
*
|
|
319
|
-
*
|
|
320
|
-
*
|
|
321
|
-
* -
|
|
322
|
-
* -
|
|
323
|
-
* -
|
|
324
|
-
* -
|
|
415
|
+
* Automatically moves the camera to a diagonal position relative to the target,
|
|
416
|
+
* ensuring the target is within the field of view (smooth transition).
|
|
417
|
+
*
|
|
418
|
+
* Features:
|
|
419
|
+
* - Supports multiple easing functions
|
|
420
|
+
* - Adds progress callback
|
|
421
|
+
* - Supports animation cancellation
|
|
422
|
+
* - Uses WeakMap to track and prevent memory leaks
|
|
423
|
+
* - Robust error handling
|
|
325
424
|
*/
|
|
326
425
|
declare function followModels(camera: THREE.Camera, targets: THREE.Object3D | THREE.Object3D[] | null | undefined, options?: FollowOptions): Promise<void>;
|
|
327
426
|
/**
|
|
328
|
-
*
|
|
427
|
+
* Cancel the camera follow animation
|
|
329
428
|
*/
|
|
330
429
|
declare function cancelFollow(camera: THREE.Camera): void;
|
|
331
430
|
|
|
332
431
|
/**
|
|
333
|
-
*
|
|
432
|
+
* @file setView.ts
|
|
433
|
+
* @description
|
|
434
|
+
* Utility to smoothly transition the camera to preset views (Front, Back, Top, Isometric, etc.).
|
|
435
|
+
*
|
|
436
|
+
* @best-practice
|
|
437
|
+
* - Use `setView` for UI buttons that switch camera angles.
|
|
438
|
+
* - Leverage `ViewPresets` for readable code when using standard views.
|
|
439
|
+
*/
|
|
440
|
+
|
|
441
|
+
/**
|
|
442
|
+
* View types
|
|
334
443
|
*/
|
|
335
444
|
type ViewPosition = 'front' | 'back' | 'left' | 'right' | 'top' | 'bottom' | 'iso';
|
|
336
445
|
/**
|
|
337
|
-
*
|
|
446
|
+
* View configuration options
|
|
338
447
|
*/
|
|
339
448
|
interface SetViewOptions {
|
|
340
449
|
distanceFactor?: number;
|
|
@@ -343,46 +452,57 @@ interface SetViewOptions {
|
|
|
343
452
|
onProgress?: (progress: number) => void;
|
|
344
453
|
}
|
|
345
454
|
/**
|
|
346
|
-
*
|
|
347
|
-
*
|
|
348
|
-
*
|
|
349
|
-
* -
|
|
350
|
-
* -
|
|
351
|
-
* -
|
|
352
|
-
* -
|
|
353
|
-
* -
|
|
354
|
-
*
|
|
355
|
-
* @param camera THREE.PerspectiveCamera
|
|
356
|
-
* @param controls OrbitControls
|
|
357
|
-
* @param targetObj THREE.Object3D
|
|
358
|
-
* @param position
|
|
359
|
-
* @param options
|
|
455
|
+
* Smoothly switches the camera to the optimal angle for the model.
|
|
456
|
+
*
|
|
457
|
+
* Features:
|
|
458
|
+
* - Reuses followModels logic to avoid code duplication
|
|
459
|
+
* - Supports more angles
|
|
460
|
+
* - Enhanced configuration options
|
|
461
|
+
* - Returns Promise to support chaining
|
|
462
|
+
* - Supports animation cancellation
|
|
463
|
+
*
|
|
464
|
+
* @param camera THREE.PerspectiveCamera instance
|
|
465
|
+
* @param controls OrbitControls instance
|
|
466
|
+
* @param targetObj THREE.Object3D model object
|
|
467
|
+
* @param position View position
|
|
468
|
+
* @param options Configuration options
|
|
360
469
|
* @returns Promise<void>
|
|
361
470
|
*/
|
|
362
471
|
declare function setView(camera: THREE.PerspectiveCamera, controls: OrbitControls, targetObj: THREE.Object3D, position?: ViewPosition, options?: SetViewOptions): Promise<void>;
|
|
363
472
|
/**
|
|
364
|
-
*
|
|
473
|
+
* Cancel view switch animation
|
|
365
474
|
*/
|
|
366
475
|
declare function cancelSetView(camera: THREE.PerspectiveCamera): void;
|
|
367
476
|
/**
|
|
368
|
-
*
|
|
477
|
+
* Preset view shortcut methods
|
|
369
478
|
*/
|
|
370
479
|
declare const ViewPresets: {
|
|
371
480
|
/**
|
|
372
|
-
*
|
|
481
|
+
* Front View
|
|
373
482
|
*/
|
|
374
483
|
front: (camera: THREE.PerspectiveCamera, controls: OrbitControls, target: THREE.Object3D, options?: SetViewOptions) => Promise<void>;
|
|
375
484
|
/**
|
|
376
|
-
*
|
|
485
|
+
* Isometric View
|
|
377
486
|
*/
|
|
378
487
|
isometric: (camera: THREE.PerspectiveCamera, controls: OrbitControls, target: THREE.Object3D, options?: SetViewOptions) => Promise<void>;
|
|
379
488
|
/**
|
|
380
|
-
*
|
|
489
|
+
* Top View
|
|
381
490
|
*/
|
|
382
491
|
top: (camera: THREE.PerspectiveCamera, controls: OrbitControls, target: THREE.Object3D, options?: SetViewOptions) => Promise<void>;
|
|
383
492
|
};
|
|
384
493
|
|
|
385
|
-
/**
|
|
494
|
+
/**
|
|
495
|
+
* @file modelLoader.ts
|
|
496
|
+
* @description
|
|
497
|
+
* Utility to load 3D models (GLTF, FBX, OBJ, PLY, STL) from URLs.
|
|
498
|
+
*
|
|
499
|
+
* @best-practice
|
|
500
|
+
* - Use `loadModelByUrl` for a unified loading interface.
|
|
501
|
+
* - Supports Draco compression and KTX2 textures for GLTF.
|
|
502
|
+
* - Includes optimization options like geometry merging and texture downscaling.
|
|
503
|
+
*/
|
|
504
|
+
|
|
505
|
+
/** Loading Options: Now has default values */
|
|
386
506
|
interface LoadOptions {
|
|
387
507
|
manager?: THREE.LoadingManager;
|
|
388
508
|
dracoDecoderPath?: string | null;
|
|
@@ -392,23 +512,36 @@ interface LoadOptions {
|
|
|
392
512
|
maxTextureSize?: number | null;
|
|
393
513
|
useSimpleMaterials?: boolean;
|
|
394
514
|
skipSkinned?: boolean;
|
|
515
|
+
/** Whether to cache the model (default true) */
|
|
516
|
+
useCache?: boolean;
|
|
395
517
|
}
|
|
396
518
|
declare function loadModelByUrl(url: string, options?: LoadOptions): Promise<THREE.Object3D>;
|
|
397
|
-
/**
|
|
519
|
+
/** Completely dispose object: geometry, material and its textures (Danger: shared resources will be disposed) */
|
|
398
520
|
declare function disposeObject(obj: THREE.Object3D | null): void;
|
|
399
|
-
/**
|
|
521
|
+
/** Dispose material and its textures */
|
|
400
522
|
declare function disposeMaterial(mat: any): void;
|
|
401
523
|
|
|
402
524
|
/**
|
|
403
|
-
*
|
|
525
|
+
* @file skyboxLoader.ts
|
|
526
|
+
* @description
|
|
527
|
+
* Utility for loading skyboxes (CubeTexture or Equirectangular/HDR).
|
|
528
|
+
*
|
|
529
|
+
* @best-practice
|
|
530
|
+
* - Use `loadSkybox` for a unified interface.
|
|
531
|
+
* - Supports internal caching to avoid reloading the same skybox.
|
|
532
|
+
* - Can set background and environment map independently.
|
|
533
|
+
*/
|
|
534
|
+
|
|
535
|
+
/**
|
|
536
|
+
* Skybox Loader Utility
|
|
404
537
|
*
|
|
405
|
-
*
|
|
406
|
-
* -
|
|
407
|
-
* -
|
|
538
|
+
* Supports:
|
|
539
|
+
* - Cube Texture: paths: [px, nx, py, ny, pz, nz]
|
|
540
|
+
* - Equirectangular / HDR Panorama: url: 'path/to/scene.hdr' or jpg
|
|
408
541
|
*
|
|
409
|
-
*
|
|
542
|
+
* Returns a SkyboxHandle containing modification records for the scene and a dispose() method.
|
|
410
543
|
*/
|
|
411
|
-
/**
|
|
544
|
+
/** Unified Return Handle */
|
|
412
545
|
type SkyboxHandle = {
|
|
413
546
|
key: string;
|
|
414
547
|
backgroundTexture: THREE.Texture | null;
|
|
@@ -416,10 +549,10 @@ type SkyboxHandle = {
|
|
|
416
549
|
pmremGenerator: THREE.PMREMGenerator | null;
|
|
417
550
|
setAsBackground: boolean;
|
|
418
551
|
setAsEnvironment: boolean;
|
|
419
|
-
/**
|
|
552
|
+
/** Unload and release resources (if cached/shared, refCount logic is needed) */
|
|
420
553
|
dispose: () => void;
|
|
421
554
|
};
|
|
422
|
-
/**
|
|
555
|
+
/** Loading Options & Defaults */
|
|
423
556
|
interface SkyboxOptions {
|
|
424
557
|
setAsBackground?: boolean;
|
|
425
558
|
setAsEnvironment?: boolean;
|
|
@@ -428,15 +561,15 @@ interface SkyboxOptions {
|
|
|
428
561
|
cache?: boolean;
|
|
429
562
|
}
|
|
430
563
|
/**
|
|
431
|
-
*
|
|
432
|
-
* @param renderer THREE.WebGLRenderer -
|
|
564
|
+
* Load Cube Texture (6 images)
|
|
565
|
+
* @param renderer THREE.WebGLRenderer - Used for PMREM generating environment map
|
|
433
566
|
* @param scene THREE.Scene
|
|
434
|
-
* @param paths string[] 6
|
|
567
|
+
* @param paths string[] 6 image paths, order: [px, nx, py, ny, pz, nz]
|
|
435
568
|
* @param opts SkyboxOptions
|
|
436
569
|
*/
|
|
437
570
|
declare function loadCubeSkybox(renderer: THREE.WebGLRenderer, scene: THREE.Scene, paths: string[], opts?: SkyboxOptions): Promise<SkyboxHandle>;
|
|
438
571
|
/**
|
|
439
|
-
*
|
|
572
|
+
* Load Equirectangular/Single Image (Supports HDR via RGBELoader)
|
|
440
573
|
* @param renderer THREE.WebGLRenderer
|
|
441
574
|
* @param scene THREE.Scene
|
|
442
575
|
* @param url string - *.hdr, *.exr, *.jpg, *.png
|
|
@@ -451,15 +584,26 @@ type LoadSkyboxParams = {
|
|
|
451
584
|
url: string;
|
|
452
585
|
};
|
|
453
586
|
declare function loadSkybox(renderer: THREE.WebGLRenderer, scene: THREE.Scene, params: LoadSkyboxParams, opts?: SkyboxOptions): Promise<SkyboxHandle>;
|
|
454
|
-
/**
|
|
587
|
+
/** Release a cached skybox (decrements refCount, only truly disposes when refCount=0) */
|
|
455
588
|
declare function releaseSkybox(handle: SkyboxHandle): void;
|
|
456
589
|
|
|
457
590
|
/**
|
|
458
|
-
*
|
|
591
|
+
* @file blueSkyManager.ts
|
|
592
|
+
* @description
|
|
593
|
+
* Global singleton manager for loading and managing HDR/EXR blue sky environment maps.
|
|
594
|
+
*
|
|
595
|
+
* @best-practice
|
|
596
|
+
* - Call `init` once before use.
|
|
597
|
+
* - Use `loadAsync` to load skyboxes with progress tracking.
|
|
598
|
+
* - Automatically handles PMREM generation for realistic lighting.
|
|
599
|
+
*/
|
|
600
|
+
|
|
601
|
+
/**
|
|
602
|
+
* Load progress callback type
|
|
459
603
|
*/
|
|
460
604
|
type LoadProgressCallback = (progress: number) => void;
|
|
461
605
|
/**
|
|
462
|
-
*
|
|
606
|
+
* Load options
|
|
463
607
|
*/
|
|
464
608
|
interface LoadSkyOptions {
|
|
465
609
|
background?: boolean;
|
|
@@ -468,91 +612,115 @@ interface LoadSkyOptions {
|
|
|
468
612
|
onError?: (error: any) => void;
|
|
469
613
|
}
|
|
470
614
|
/**
|
|
471
|
-
* BlueSkyManager -
|
|
615
|
+
* BlueSkyManager - Optimized
|
|
472
616
|
* ---------------------------------------------------------
|
|
473
|
-
*
|
|
474
|
-
*
|
|
475
|
-
*
|
|
476
|
-
* -
|
|
477
|
-
* -
|
|
478
|
-
* -
|
|
479
|
-
* -
|
|
480
|
-
* -
|
|
617
|
+
* A global singleton manager for loading and managing HDR/EXR based blue sky environment maps.
|
|
618
|
+
*
|
|
619
|
+
* Features:
|
|
620
|
+
* - Adds load progress callback
|
|
621
|
+
* - Supports load cancellation
|
|
622
|
+
* - Improved error handling
|
|
623
|
+
* - Returns Promise for async operation
|
|
624
|
+
* - Adds loading state management
|
|
481
625
|
*/
|
|
482
626
|
declare class BlueSkyManager {
|
|
483
|
-
/** three.js
|
|
627
|
+
/** three.js renderer instance */
|
|
484
628
|
private renderer;
|
|
485
|
-
/** three.js
|
|
629
|
+
/** three.js scene instance */
|
|
486
630
|
private scene;
|
|
487
|
-
/** PMREM
|
|
631
|
+
/** PMREM generator, used to convert HDR/EXR to efficient reflection maps */
|
|
488
632
|
private pmremGen;
|
|
489
|
-
/**
|
|
633
|
+
/** RenderTarget for current environment map, used for subsequent disposal */
|
|
490
634
|
private skyRT;
|
|
491
|
-
/**
|
|
635
|
+
/** Whether already initialized */
|
|
492
636
|
private isInitialized;
|
|
493
|
-
/**
|
|
637
|
+
/** Current loader, used for cancelling load */
|
|
494
638
|
private currentLoader;
|
|
495
|
-
/**
|
|
639
|
+
/** Loading state */
|
|
496
640
|
private loadingState;
|
|
497
641
|
/**
|
|
498
|
-
*
|
|
642
|
+
* Initialize
|
|
499
643
|
* ---------------------------------------------------------
|
|
500
|
-
*
|
|
501
|
-
* @param renderer WebGLRenderer
|
|
502
|
-
* @param scene Three.js
|
|
503
|
-
* @param exposure
|
|
644
|
+
* Must be called once before using BlueSkyManager.
|
|
645
|
+
* @param renderer WebGLRenderer instance
|
|
646
|
+
* @param scene Three.js Scene
|
|
647
|
+
* @param exposure Exposure (default 1.0)
|
|
504
648
|
*/
|
|
505
649
|
init(renderer: THREE.WebGLRenderer, scene: THREE.Scene, exposure?: number): void;
|
|
506
650
|
/**
|
|
507
|
-
*
|
|
651
|
+
* Load blue sky HDR/EXR map and apply to scene (Promise version)
|
|
508
652
|
* ---------------------------------------------------------
|
|
509
|
-
* @param exrPath HDR/EXR
|
|
510
|
-
* @param options
|
|
653
|
+
* @param exrPath HDR/EXR file path
|
|
654
|
+
* @param options Load options
|
|
511
655
|
* @returns Promise<void>
|
|
512
656
|
*/
|
|
513
657
|
loadAsync(exrPath: string, options?: LoadSkyOptions): Promise<void>;
|
|
514
658
|
/**
|
|
515
|
-
*
|
|
659
|
+
* Load blue sky HDR/EXR map and apply to scene (Sync API, for backward compatibility)
|
|
516
660
|
* ---------------------------------------------------------
|
|
517
|
-
* @param exrPath HDR/EXR
|
|
518
|
-
* @param background
|
|
661
|
+
* @param exrPath HDR/EXR file path
|
|
662
|
+
* @param background Whether to apply as scene background (default true)
|
|
519
663
|
*/
|
|
520
664
|
load(exrPath: string, background?: boolean): void;
|
|
521
665
|
/**
|
|
522
|
-
*
|
|
666
|
+
* Cancel current load
|
|
523
667
|
*/
|
|
524
668
|
cancelLoad(): void;
|
|
525
669
|
/**
|
|
526
|
-
*
|
|
670
|
+
* Get loading state
|
|
527
671
|
*/
|
|
528
672
|
getLoadingState(): 'idle' | 'loading' | 'loaded' | 'error';
|
|
529
673
|
/**
|
|
530
|
-
*
|
|
674
|
+
* Is loading
|
|
531
675
|
*/
|
|
532
676
|
isLoading(): boolean;
|
|
533
677
|
/**
|
|
534
|
-
*
|
|
678
|
+
* Release current sky texture resources
|
|
535
679
|
* ---------------------------------------------------------
|
|
536
|
-
*
|
|
537
|
-
*
|
|
680
|
+
* Only cleans up skyRT, does not destroy PMREM
|
|
681
|
+
* Suitable for calling when switching HDR/EXR files
|
|
538
682
|
*/
|
|
539
683
|
dispose(): void;
|
|
540
684
|
/**
|
|
541
|
-
*
|
|
685
|
+
* Completely destroy BlueSkyManager
|
|
542
686
|
* ---------------------------------------------------------
|
|
543
|
-
*
|
|
544
|
-
*
|
|
687
|
+
* Includes destruction of PMREMGenerator
|
|
688
|
+
* Usually called when the scene is completely destroyed or the application exits
|
|
545
689
|
*/
|
|
546
690
|
destroy(): void;
|
|
547
691
|
}
|
|
548
692
|
/**
|
|
549
|
-
*
|
|
693
|
+
* Global Singleton
|
|
550
694
|
* ---------------------------------------------------------
|
|
551
|
-
*
|
|
552
|
-
*
|
|
695
|
+
* Directly export a globally unique BlueSkyManager instance,
|
|
696
|
+
* Ensuring only one PMREMGenerator is used throughout the application for best performance.
|
|
553
697
|
*/
|
|
554
698
|
declare const BlueSky: BlueSkyManager;
|
|
555
699
|
|
|
700
|
+
interface GlobalLoaderConfig {
|
|
701
|
+
dracoDecoderPath: string;
|
|
702
|
+
ktx2TranscoderPath: string;
|
|
703
|
+
}
|
|
704
|
+
/**
|
|
705
|
+
* Update global loader configuration (e.g., set path to CDN)
|
|
706
|
+
*/
|
|
707
|
+
declare function setLoaderConfig(config: Partial<GlobalLoaderConfig>): void;
|
|
708
|
+
/**
|
|
709
|
+
* Get current global loader configuration
|
|
710
|
+
*/
|
|
711
|
+
declare function getLoaderConfig(): GlobalLoaderConfig;
|
|
712
|
+
|
|
713
|
+
/**
|
|
714
|
+
* @file modelsLabel.ts
|
|
715
|
+
* @description
|
|
716
|
+
* Creates interactive 2D labels (DOM elements) attached to 3D objects with connecting lines.
|
|
717
|
+
*
|
|
718
|
+
* @best-practice
|
|
719
|
+
* - Use `createModelsLabel` to annotate parts of a model.
|
|
720
|
+
* - Supports fading endpoints, pulsing dots, and custom styling.
|
|
721
|
+
* - Performance optimized with caching and RAF throttling.
|
|
722
|
+
*/
|
|
723
|
+
|
|
556
724
|
interface LabelOptions {
|
|
557
725
|
fontSize?: string;
|
|
558
726
|
color?: string;
|
|
@@ -575,153 +743,48 @@ interface LabelManager {
|
|
|
575
743
|
dispose: () => void;
|
|
576
744
|
}
|
|
577
745
|
/**
|
|
578
|
-
*
|
|
579
|
-
*
|
|
580
|
-
*
|
|
581
|
-
* -
|
|
582
|
-
* -
|
|
583
|
-
* -
|
|
584
|
-
* -
|
|
585
|
-
* - RAF
|
|
746
|
+
* Create Model Labels (with connecting lines and pulsing dots) - Optimized
|
|
747
|
+
*
|
|
748
|
+
* Features:
|
|
749
|
+
* - Supports pause/resume
|
|
750
|
+
* - Configurable update interval
|
|
751
|
+
* - Fade in/out effects
|
|
752
|
+
* - Cached bounding box calculation
|
|
753
|
+
* - RAF management optimization
|
|
586
754
|
*/
|
|
587
755
|
declare function createModelsLabel(camera: THREE.Camera, renderer: THREE.WebGLRenderer, parentModel: THREE.Object3D, modelLabelsMap: Record<string, string>, options?: LabelOptions): LabelManager;
|
|
588
756
|
|
|
589
757
|
/**
|
|
590
|
-
*
|
|
591
|
-
*
|
|
592
|
-
*
|
|
593
|
-
* - 仅初始化一次(onMounted)
|
|
594
|
-
* - 支持动态切换模型并自动还原上一个模型的爆炸状态
|
|
595
|
-
* - 支持多种排列模式(ring / spiral / grid / radial)
|
|
596
|
-
* - 支持非爆炸对象自动透明化(dimOthers)
|
|
597
|
-
* - 支持摄像机自动前置定位到最佳观察点
|
|
598
|
-
* - 所有动画均采用原生 requestAnimationFrame 实现
|
|
599
|
-
*
|
|
600
|
-
* ----------------------------------------------------------------------
|
|
601
|
-
* 🔧 构造参数
|
|
758
|
+
* @file exploder.ts
|
|
759
|
+
* @description
|
|
760
|
+
* GroupExploder - Three.js based model explosion effect tool (Vue3 + TS Support)
|
|
602
761
|
* ----------------------------------------------------------------------
|
|
603
|
-
*
|
|
604
|
-
*
|
|
605
|
-
*
|
|
606
|
-
*
|
|
607
|
-
*
|
|
608
|
-
*
|
|
609
|
-
*
|
|
610
|
-
*
|
|
611
|
-
*
|
|
612
|
-
*
|
|
613
|
-
*
|
|
614
|
-
*
|
|
615
|
-
* 爆炸排列方式:
|
|
616
|
-
* - 'ring' 环形排列(默认)
|
|
617
|
-
* - 'spiral' 螺旋上升排列
|
|
618
|
-
* - 'grid' 平面网格排列(规则整齐)
|
|
619
|
-
* - 'radial' 从中心点向外扩散
|
|
620
|
-
*
|
|
621
|
-
* @param spacing?: number
|
|
622
|
-
* 相邻爆炸对象之间的间距(默认:2.5)
|
|
623
|
-
*
|
|
624
|
-
* @param duration?: number
|
|
625
|
-
* 爆炸动画时长(ms),原生 rAF 完成(默认:1000)
|
|
626
|
-
*
|
|
627
|
-
* @param lift?: number
|
|
628
|
-
* 爆炸对象整体抬升的高度因子,用于让爆炸看起来更立体(默认:0.6)
|
|
629
|
-
*
|
|
630
|
-
* @param cameraPadding?: number
|
|
631
|
-
* 摄像机贴合爆炸后包围球时的额外安全距离(默认:1.2)
|
|
632
|
-
*
|
|
633
|
-
* @param autoRestorePrev?: boolean
|
|
634
|
-
* 当切换模型时,是否自动 restore 上一个模型的爆炸元素(默认:true)
|
|
635
|
-
*
|
|
636
|
-
* @param dimOthers?: { enabled: boolean; opacity?: number }
|
|
637
|
-
* 非爆炸对象透明化配置:
|
|
638
|
-
* - enabled: true 开启
|
|
639
|
-
* - opacity: number 指定非爆炸对象透明度(默认:0.15)
|
|
640
|
-
*
|
|
641
|
-
* @param debug?: boolean
|
|
642
|
-
* 是否开启调试日志,输出所有内部状态(默认 false)
|
|
643
|
-
*
|
|
644
|
-
*
|
|
645
|
-
* ----------------------------------------------------------------------
|
|
646
|
-
* 📌 方法说明
|
|
647
|
-
* ----------------------------------------------------------------------
|
|
648
|
-
*
|
|
649
|
-
* ◆ setMeshes(meshSet: Set<Mesh>, contextId?: string)
|
|
650
|
-
* 设置当前模型的爆炸 Mesh 集合:
|
|
651
|
-
* - 会记录 Mesh 的初始 transform
|
|
652
|
-
* - 根据 autoRestorePrev 自动还原上次爆炸
|
|
653
|
-
* - 第二个参数 contextId 可选,用于区分业务场景
|
|
654
|
-
*
|
|
655
|
-
*
|
|
656
|
-
* ◆ explode(options?: ExplodeOptions)
|
|
657
|
-
* 对当前 meshSet 执行爆炸动画:
|
|
658
|
-
* - 根据 mode 生成爆炸布局
|
|
659
|
-
* - 相机先自动飞向最佳观察点
|
|
660
|
-
* - 执行 mesh 位移动画
|
|
661
|
-
* - 按需将非爆炸模型透明化
|
|
662
|
-
*
|
|
663
|
-
*
|
|
664
|
-
* ◆ restore(duration?: number)
|
|
665
|
-
* 还原所有爆炸 Mesh 到爆炸前的 transform:
|
|
666
|
-
* - 支持平滑动画
|
|
667
|
-
* - 自动取消透明化
|
|
668
|
-
*
|
|
669
|
-
*
|
|
670
|
-
* ◆ dispose()
|
|
671
|
-
* 移除事件监听、取消动画、清理引用(在组件销毁时调用)
|
|
672
|
-
*
|
|
673
|
-
*
|
|
674
|
-
* ----------------------------------------------------------------------
|
|
675
|
-
* 🎨 排列模式说明
|
|
676
|
-
* ----------------------------------------------------------------------
|
|
677
|
-
*
|
|
678
|
-
* 1. Ring(环形)
|
|
679
|
-
* - 按圆均匀分布
|
|
680
|
-
* - spacing 控制半径
|
|
681
|
-
* - lift 控制整体抬起高度
|
|
682
|
-
*
|
|
683
|
-
* 2. Spiral(螺旋)
|
|
684
|
-
* - 在环形基础上添加高度递增(y++)
|
|
685
|
-
* - 数量大时视觉效果最强
|
|
686
|
-
*
|
|
687
|
-
* 3. Grid(网格)
|
|
688
|
-
* - 类似棋盘布局
|
|
689
|
-
* - spacing 控制网格大小
|
|
690
|
-
* - z 不变或小幅度变化
|
|
691
|
-
*
|
|
692
|
-
* 4. Radial(径向扩散)
|
|
693
|
-
* - 从中心向外 “爆炸式” 发散
|
|
694
|
-
* - 对于大型组件分解展示非常适合
|
|
695
|
-
*
|
|
696
|
-
*
|
|
697
|
-
* ----------------------------------------------------------------------
|
|
698
|
-
* 📌 使用示例(业务层 Vue)
|
|
699
|
-
* ----------------------------------------------------------------------
|
|
700
|
-
*
|
|
701
|
-
* const exploder = new GroupExploder(scene, camera, controls);
|
|
702
|
-
*
|
|
703
|
-
* onMounted(() => {
|
|
704
|
-
* exploder.setMeshes(new Set([meshA, meshB, meshC]));
|
|
705
|
-
* });
|
|
706
|
-
*
|
|
707
|
-
* const triggerExplode = () => {
|
|
708
|
-
* exploder.explode({
|
|
709
|
-
* mode: 'ring',
|
|
710
|
-
* spacing: 3,
|
|
711
|
-
* duration: 1200,
|
|
712
|
-
* lift: 0.8,
|
|
713
|
-
* cameraPadding: 1.3,
|
|
714
|
-
* dimOthers: { enabled: true, opacity: 0.2 },
|
|
715
|
-
* });
|
|
716
|
-
* };
|
|
717
|
-
*
|
|
718
|
-
* const triggerRestore = () => {
|
|
719
|
-
* exploder.restore(600);
|
|
720
|
-
* };
|
|
721
|
-
*
|
|
762
|
+
* This tool is used to perform "explode / restore" animations on a set of specified Meshes:
|
|
763
|
+
* - Initialize only once (onMounted)
|
|
764
|
+
* - Supports dynamic switching of models and automatically restores the explosion state of the previous model
|
|
765
|
+
* - Supports multiple arrangement modes (ring / spiral / grid / radial)
|
|
766
|
+
* - Supports automatic transparency for non-exploded objects (dimOthers)
|
|
767
|
+
* - Supports automatic camera positioning to the best observation point
|
|
768
|
+
* - All animations use native requestAnimationFrame
|
|
769
|
+
*
|
|
770
|
+
* @best-practice
|
|
771
|
+
* - Initialize in `onMounted`.
|
|
772
|
+
* - Use `setMeshes` to update the active set of meshes to explode.
|
|
773
|
+
* - Call `explode()` to trigger the effect and `restore()` to reset.
|
|
722
774
|
*/
|
|
723
775
|
|
|
724
776
|
type ArrangeMode = 'ring' | 'spiral' | 'grid' | 'radial';
|
|
777
|
+
/**
|
|
778
|
+
* Explosion Parameters
|
|
779
|
+
* @param mode Explosion arrangement mode: 'ring' | 'spiral' | 'grid' | 'radial'
|
|
780
|
+
* @param spacing Spacing between adjacent exploded objects (default: 2.5)
|
|
781
|
+
* @param duration Animation duration in ms (default: 1000)
|
|
782
|
+
* @param lift Lift factor for exploded objects (default: 0.6)
|
|
783
|
+
* @param cameraPadding Extra safety distance for camera framing (default: 1.2)
|
|
784
|
+
* @param autoRestorePrev Whether to automatically restore the previous model's explosion when switching models (default: true)
|
|
785
|
+
* @param dimOthers Configuration for dimming non-exploded objects
|
|
786
|
+
* @param debug Enable debug logs (default: false)
|
|
787
|
+
*/
|
|
725
788
|
type ExplodeOptions = {
|
|
726
789
|
mode?: ArrangeMode;
|
|
727
790
|
spacing?: number;
|
|
@@ -751,6 +814,12 @@ declare class GroupExploder {
|
|
|
751
814
|
private isExploded;
|
|
752
815
|
private isInitialized;
|
|
753
816
|
onLog?: (s: string) => void;
|
|
817
|
+
/**
|
|
818
|
+
* Constructor
|
|
819
|
+
* @param scene Three.js Scene instance
|
|
820
|
+
* @param camera Three.js Camera (usually PerspectiveCamera)
|
|
821
|
+
* @param controls OrbitControls instance (must be bound to camera)
|
|
822
|
+
*/
|
|
754
823
|
constructor(scene: THREE.Scene, camera: THREE.PerspectiveCamera | THREE.Camera, controls?: {
|
|
755
824
|
target?: THREE.Vector3;
|
|
756
825
|
update?: () => void;
|
|
@@ -758,10 +827,12 @@ declare class GroupExploder {
|
|
|
758
827
|
private log;
|
|
759
828
|
init(): void;
|
|
760
829
|
/**
|
|
761
|
-
*
|
|
830
|
+
* Set the current set of meshes for explosion.
|
|
762
831
|
* - Detects content-level changes even if same Set reference is used.
|
|
763
832
|
* - Preserves prevSet/stateMap to allow async restore when needed.
|
|
764
833
|
* - Ensures stateMap contains snapshots for *all meshes in the new set*.
|
|
834
|
+
* @param newSet The new set of meshes
|
|
835
|
+
* @param contextId Optional context ID to distinguish business scenarios
|
|
765
836
|
*/
|
|
766
837
|
setMeshes(newSet: Set<THREE.Mesh> | null, options?: {
|
|
767
838
|
autoRestorePrev?: boolean;
|
|
@@ -777,6 +848,11 @@ declare class GroupExploder {
|
|
|
777
848
|
* animate camera to that targetBound, then animate meshes to targets.
|
|
778
849
|
*/
|
|
779
850
|
explode(opts?: ExplodeOptions): Promise<void>;
|
|
851
|
+
/**
|
|
852
|
+
* Restore all exploded meshes to their original transform:
|
|
853
|
+
* - Supports smooth animation
|
|
854
|
+
* - Automatically cancels transparency
|
|
855
|
+
*/
|
|
780
856
|
restore(duration?: number): Promise<void>;
|
|
781
857
|
/**
|
|
782
858
|
* restoreSet: reparent and restore transforms using provided stateMap.
|
|
@@ -791,30 +867,38 @@ declare class GroupExploder {
|
|
|
791
867
|
private computeBoundingSphereForPositionsAndMeshes;
|
|
792
868
|
private computeTargetsByMode;
|
|
793
869
|
private animateCameraToFit;
|
|
794
|
-
|
|
870
|
+
/**
|
|
871
|
+
* Cancel all running animations
|
|
872
|
+
*/
|
|
795
873
|
private cancelAnimations;
|
|
796
|
-
|
|
874
|
+
/**
|
|
875
|
+
* Dispose: remove listener, cancel animation, clear references
|
|
876
|
+
*/
|
|
877
|
+
dispose(): void;
|
|
797
878
|
}
|
|
798
879
|
|
|
880
|
+
/**
|
|
881
|
+
* @file autoSetup.ts
|
|
882
|
+
* @description
|
|
883
|
+
* Automatically sets up the camera and basic lighting scene based on the model's bounding box.
|
|
884
|
+
*/
|
|
885
|
+
|
|
799
886
|
interface AutoSetupOptions {
|
|
800
|
-
/**
|
|
887
|
+
/** Extra padding multiplier based on bounding sphere (>1 expands view range) */
|
|
801
888
|
padding?: number;
|
|
802
|
-
/**
|
|
889
|
+
/** Camera elevation offset (radians), default slight top-down (0.2 rad ≈ 11°) */
|
|
803
890
|
elevation?: number;
|
|
804
|
-
/**
|
|
891
|
+
/** Whether to enable shadows - high performance cost, default false */
|
|
805
892
|
enableShadows?: boolean;
|
|
806
|
-
/**
|
|
893
|
+
/** Shadow map size, higher is clearer but more expensive, default 1024 */
|
|
807
894
|
shadowMapSize?: number;
|
|
808
|
-
/** DirectionalLights
|
|
895
|
+
/** Number of DirectionalLights (evenly distributed around) */
|
|
809
896
|
directionalCount?: number;
|
|
810
|
-
/**
|
|
897
|
+
/** Whether to automatically set mesh.castShadow / mesh.receiveShadow to true (default true) */
|
|
811
898
|
setMeshShadowProps?: boolean;
|
|
812
|
-
/**
|
|
899
|
+
/** If renderer is passed, the tool will automatically enable renderer.shadowMap (if enableShadows is true) */
|
|
813
900
|
renderer?: THREE.WebGLRenderer | null;
|
|
814
901
|
}
|
|
815
|
-
/**
|
|
816
|
-
* 返回值句柄,包含 created lights group、computed center/radius、以及 dispose 方法
|
|
817
|
-
*/
|
|
818
902
|
type AutoSetupHandle = {
|
|
819
903
|
lightsGroup: THREE.Group;
|
|
820
904
|
center: THREE.Vector3;
|
|
@@ -823,19 +907,18 @@ type AutoSetupHandle = {
|
|
|
823
907
|
updateLightIntensity: (factor: number) => void;
|
|
824
908
|
};
|
|
825
909
|
/**
|
|
826
|
-
*
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
*
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
*
|
|
838
|
-
* 返回 AutoSetupHandle,调用方在组件卸载/切换时请调用 handle.dispose()
|
|
910
|
+
* Fit camera to object bounding box
|
|
911
|
+
*/
|
|
912
|
+
declare function fitCameraToObject(camera: THREE.PerspectiveCamera, object: THREE.Object3D, padding?: number, elevation?: number): {
|
|
913
|
+
center: THREE.Vector3;
|
|
914
|
+
radius: number;
|
|
915
|
+
};
|
|
916
|
+
/**
|
|
917
|
+
* Setup default lighting for a model
|
|
918
|
+
*/
|
|
919
|
+
declare function setupDefaultLights(scene: THREE.Scene, model: THREE.Object3D, options?: AutoSetupOptions): AutoSetupHandle;
|
|
920
|
+
/**
|
|
921
|
+
* Automatically setup camera and basic lighting (Combine fitCameraToObject and setupDefaultLights)
|
|
839
922
|
*/
|
|
840
923
|
declare function autoSetupCameraAndLight(camera: THREE.PerspectiveCamera, scene: THREE.Scene, model: THREE.Object3D, options?: AutoSetupOptions): AutoSetupHandle;
|
|
841
924
|
|
|
@@ -846,7 +929,7 @@ declare function autoSetupCameraAndLight(camera: THREE.PerspectiveCamera, scene:
|
|
|
846
929
|
* @packageDocumentation
|
|
847
930
|
*/
|
|
848
931
|
|
|
849
|
-
declare const VERSION = "1.0.
|
|
932
|
+
declare const VERSION = "1.0.4";
|
|
850
933
|
|
|
851
|
-
export { ArrowGuide, BlueSky, FOLLOW_ANGLES, GroupExploder, LiquidFillerGroup, VERSION, ViewPresets, addChildModelLabels, autoSetupCameraAndLight, cancelFollow, cancelSetView, createModelClickHandler, createModelsLabel, disposeMaterial, disposeObject, enableHoverBreath, followModels, initPostProcessing, loadCubeSkybox, loadEquirectSkybox, loadModelByUrl, loadSkybox, releaseSkybox, setView };
|
|
852
|
-
export type { AutoSetupHandle, AutoSetupOptions, ClickHandlerOptions, ExplodeOptions, FilterFn, FollowOptions, HoverBreathOptions, LiquidFillerOptions, LoadOptions, LoadProgressCallback, LoadSkyOptions, LoadSkyboxParams, PostProcessingManager, PostProcessingOptions, SetViewOptions, SkyboxHandle, SkyboxOptions, ViewPosition };
|
|
934
|
+
export { ArrowGuide, BlueSky, FOLLOW_ANGLES, GroupExploder, LiquidFillerGroup, ResourceManager, VERSION, ViewPresets, addChildModelLabels, autoSetupCameraAndLight, cancelFollow, cancelSetView, createModelClickHandler, createModelsLabel, disposeMaterial, disposeObject, enableHoverBreath, fitCameraToObject, followModels, getLoaderConfig, initPostProcessing, loadCubeSkybox, loadEquirectSkybox, loadModelByUrl, loadSkybox, releaseSkybox, setLoaderConfig, setView, setupDefaultLights };
|
|
935
|
+
export type { AutoSetupHandle, AutoSetupOptions, ClickHandlerOptions, ExplodeOptions, FilterFn, FollowOptions, GlobalLoaderConfig, HoverBreathOptions, LiquidFillerOptions, LoadOptions, LoadProgressCallback, LoadSkyOptions, LoadSkyboxParams, PostProcessingManager, PostProcessingOptions, SetViewOptions, SkyboxHandle, SkyboxOptions, ViewPosition };
|