LoadingManager.html 6.4 KB

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