LoadingManager.html 7.1 KB

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