1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">
Handles and keeps track of loaded and pending data. A default global instance of this class
is created and used by loaders if not supplied manually - see [page:DefaultLoadingManager].<br /><br />
In general that should be sufficient, however there are times when it can be useful to have seperate loaders -
for example if you want to show seperate loading bars for objects and textures.
</p>
<h2>Example</h2>
<p>
[example:webgl_loader_fbx WebGL / loader / fbx]<br />
[example:webgl_loader_obj WebGL / loader / obj]<br />
[example:webgl_materials_reflectivity WebGL / materials / reflectivity]<br />
[example:webgl_postprocessing_outline WebGL / postprocesing / outline]<br />
[example:webgl_terrain_dynamic WebGL / terrain / dynamic]
</p>
<p>
This example shows how to use LoadingManager to track the progress of
[page:OBJLoader].
</p>
<code>
var manager = new THREE.LoadingManager();
manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
manager.onLoad = function ( ) {
console.log( 'Loading complete!');
};
manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
manager.onError = function ( url ) {
console.log( 'There was an error loading ' + url );
};
var loader = new THREE.OBJLoader( manager );
loader.load( 'file.obj', function ( object ) {
//
} );
</code>
<p>
In addition to observing progress, a LoadingManager can be used to
override resource URLs during loading. This may be helpful for assets
coming from drag-and-drop events, WebSockets, WebRTC, or other APIs. An
example showing how to load an in-memory model using Blob URLs is below.
</p>
<code>
// Blob or File objects created when dragging files into the webpage.
var blobs = {'fish.gltf': blob1, 'diffuse.png': blob2, 'normal.png': blob3};
var manager = new THREE.LoadingManager();
// Initialize loading manager with URL callback.
var objectURLs = [];
manager.setURLModifier( ( url ) => {
url = URL.createObjectURL( blobs[ url ] );
objectURLs.push( url );
return url;
} );
// Load as usual, then revoke the blob URLs.
var loader = new THREE.GLTFLoader( manager );
loader.load( 'fish.gltf', (gltf) => {
scene.add( gltf.scene );
objectURLs.forEach( ( url ) => URL.revokeObjectURL( url ) );
});
</code>
<h2>Constructor</h2>
<h3>[name]( [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:Function onLoad] — (optional) this function will be called when all loaders are done.<br />
[page:Function onProgress] — (optional) this function will be called when an item is complete.<br />
[page:Function onError] — (optional) this function will be called a loader encounters errors. <br />
Creates a new [name].
</p>
<h2>Properties</h2>
<h3>[property:Function onStart]</h3>
<p>
This function will be called when loading starts.
The arguments are:<br />
[page:String url] — The url of the item just loaded.<br />
[page:Integer itemsLoaded] — the number of items already loaded so far.<br />
[page:Iteger itemsTotal] — the total amount of items to be loaded.<br /><br />
By default this is undefined.
</p>
<h3>[property:Function onLoad]</h3>
<p>
This function will be called when all loading is completed. By default this is undefined,
unless passed in the constructor.
</p>
<h3>[property:Function onProgress]</h3>
<p>
This function will be called when an item is complete.
The arguments are:<br />
[page:String url] — The url of the item just loaded.<br />
[page:Integer itemsLoaded] — the number of items already loaded so far.<br />
[page:Iteger itemsTotal] — the total amount of items to be loaded.<br /><br />
By default this is undefined, unless passed in the constructor.
</p>
<h3>[property:Function onError]</h3>
<p>
This function will be called when any item errors, with the argument:<br />
[page:String url] — The url of the item that errored.<br /><br />
By default this is undefined, unless passed in the constructor.
</p>
<h2>Methods</h2>
<h3>[method:LoadingManager addHandler]( [param:Object regex], [param:Loader loader] )</h3>
<p>
[page:Object regex] — A regular expression.<br />
[page:Loader loader] — The loader.
<p>
Registers a loader with the given regular expression. Can be used to define what loader should be used in
order to load specific files. A typical use case is to overwrite the default loader for textures.
</p>
<code>
// add handler for TGA textures
manager.addHandler( /\.tga$/i, new TGALoader() );
</code>
<h3>[method:null getHandler]( [param:String file] )</h3>
<p>
[page:String file] — The file path.
<p>
Can be used to retrieve the registered loader for the given file path.
</p>
<h3>[method:LoadingManager removeHandler]( [param:Object regex] )</h3>
<p>
[page:Object regex] — A regular expression.
<p>
Removes the loader for the given regular expression.
</p>
<h3>[method:String resolveURL]( [param:String url] )</h3>
<p>
[page:String url] — the url to load<br /><br />
Given a URL, uses the URL modifier callback (if any) and returns a resolved URL. If no
URL modifier is set, returns the original URL.
</p>
<h3>[method:null setURLModifier]( [param:Function callback] )</h3>
<p>
[page:Function callback] — URL modifier callback. Called with [page:String url] argument, and
must return [page:String resolvedURL].<br /><br />
If provided, the callback will be passed each resource URL before a request is sent. The
callback may return the original URL, or a new URL to override loading behavior. This
behavior can be used to load assets from .ZIP files, drag-and-drop APIs, and Data URIs.
</p>
<br /><br />
<p>
<em>Note: The following methods are designed to be called internally by loaders. You shouldn't call
them directly.</em>
</p>
<h3>[method:null itemStart]( [param:String url] )</h3>
<p>
[page:String url] — the url to load<br /><br />
This should be called by any loader using the manager when the loader starts loading an url.
</p>
<h3>[method:null itemEnd]( [param:String url] )</h3>
<p>
[page:String url] — the loaded url<br /><br />
This should be called by any loader using the manager when the loader ended loading an url.
</p>
<h3>[method:null itemError]( [param:String url] )</h3>
<p>
[page:String url] — the loaded url<br /><br />
This should be called by any loader using the manager when the loader errors loading an url.
</p>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/LoadingManager.js src/loaders/LoadingManager.js]
</body>
</html>
|
