LoadingManager.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. /**
  2. * Handles and keeps track of loaded and pending data. A default global
  3. * instance of this class is created and used by loaders if not supplied
  4. * manually.
  5. *
  6. * In general that should be sufficient, however there are times when it can
  7. * be useful to have separate loaders - for example if you want to show
  8. * separate loading bars for objects and textures.
  9. *
  10. * ```js
  11. * const manager = new THREE.LoadingManager();
  12. * manager.onLoad = () => console.log( 'Loading complete!' );
  13. *
  14. * const loader1 = new OBJLoader( manager );
  15. * const loader2 = new ColladaLoader( manager );
  16. * ```
  17. */
  18. class LoadingManager {
  19. /**
  20. * Constructs a new loading manager.
  21. *
  22. * @param {Function} [onLoad] - Executes when all items have been loaded.
  23. * @param {Function} [onProgress] - Executes when single items have been loaded.
  24. * @param {Function} [onError] - Executes when an error occurs.
  25. */
  26. constructor( onLoad, onProgress, onError ) {
  27. const scope = this;
  28. let isLoading = false;
  29. let itemsLoaded = 0;
  30. let itemsTotal = 0;
  31. let urlModifier = undefined;
  32. const handlers = [];
  33. // Refer to #5689 for the reason why we don't set .onStart
  34. // in the constructor
  35. /**
  36. * Executes when an item starts loading.
  37. *
  38. * @type {Function|undefined}
  39. * @default undefined
  40. */
  41. this.onStart = undefined;
  42. /**
  43. * Executes when all items have been loaded.
  44. *
  45. * @type {Function|undefined}
  46. * @default undefined
  47. */
  48. this.onLoad = onLoad;
  49. /**
  50. * Executes when single items have been loaded.
  51. *
  52. * @type {Function|undefined}
  53. * @default undefined
  54. */
  55. this.onProgress = onProgress;
  56. /**
  57. * Executes when an error occurs.
  58. *
  59. * @type {Function|undefined}
  60. * @default undefined
  61. */
  62. this.onError = onError;
  63. /**
  64. * Used for aborting ongoing requests in loaders using this manager.
  65. *
  66. * @type {AbortController}
  67. */
  68. this.abortController = new AbortController();
  69. /**
  70. * This should be called by any loader using the manager when the loader
  71. * starts loading an item.
  72. *
  73. * @param {string} url - The URL to load.
  74. */
  75. this.itemStart = function ( url ) {
  76. itemsTotal ++;
  77. if ( isLoading === false ) {
  78. if ( scope.onStart !== undefined ) {
  79. scope.onStart( url, itemsLoaded, itemsTotal );
  80. }
  81. }
  82. isLoading = true;
  83. };
  84. /**
  85. * This should be called by any loader using the manager when the loader
  86. * ended loading an item.
  87. *
  88. * @param {string} url - The URL of the loaded item.
  89. */
  90. this.itemEnd = function ( url ) {
  91. itemsLoaded ++;
  92. if ( scope.onProgress !== undefined ) {
  93. scope.onProgress( url, itemsLoaded, itemsTotal );
  94. }
  95. if ( itemsLoaded === itemsTotal ) {
  96. isLoading = false;
  97. if ( scope.onLoad !== undefined ) {
  98. scope.onLoad();
  99. }
  100. }
  101. };
  102. /**
  103. * This should be called by any loader using the manager when the loader
  104. * encounters an error when loading an item.
  105. *
  106. * @param {string} url - The URL of the item that produces an error.
  107. */
  108. this.itemError = function ( url ) {
  109. if ( scope.onError !== undefined ) {
  110. scope.onError( url );
  111. }
  112. };
  113. /**
  114. * Given a URL, uses the URL modifier callback (if any) and returns a
  115. * resolved URL. If no URL modifier is set, returns the original URL.
  116. *
  117. * @param {string} url - The URL to load.
  118. * @return {string} The resolved URL.
  119. */
  120. this.resolveURL = function ( url ) {
  121. if ( urlModifier ) {
  122. return urlModifier( url );
  123. }
  124. return url;
  125. };
  126. /**
  127. * If provided, the callback will be passed each resource URL before a
  128. * request is sent. The callback may return the original URL, or a new URL to
  129. * override loading behavior. This behavior can be used to load assets from
  130. * .ZIP files, drag-and-drop APIs, and Data URIs.
  131. *
  132. * ```js
  133. * const blobs = {'fish.gltf': blob1, 'diffuse.png': blob2, 'normal.png': blob3};
  134. *
  135. * const manager = new THREE.LoadingManager();
  136. *
  137. * // Initialize loading manager with URL callback.
  138. * const objectURLs = [];
  139. * manager.setURLModifier( ( url ) => {
  140. *
  141. * url = URL.createObjectURL( blobs[ url ] );
  142. * objectURLs.push( url );
  143. * return url;
  144. *
  145. * } );
  146. *
  147. * // Load as usual, then revoke the blob URLs.
  148. * const loader = new GLTFLoader( manager );
  149. * loader.load( 'fish.gltf', (gltf) => {
  150. *
  151. * scene.add( gltf.scene );
  152. * objectURLs.forEach( ( url ) => URL.revokeObjectURL( url ) );
  153. *
  154. * } );
  155. * ```
  156. *
  157. * @param {function(string):string} transform - URL modifier callback. Called with an URL and must return a resolved URL.
  158. * @return {LoadingManager} A reference to this loading manager.
  159. */
  160. this.setURLModifier = function ( transform ) {
  161. urlModifier = transform;
  162. return this;
  163. };
  164. /**
  165. * Registers a loader with the given regular expression. Can be used to
  166. * define what loader should be used in order to load specific files. A
  167. * typical use case is to overwrite the default loader for textures.
  168. *
  169. * ```js
  170. * // add handler for TGA textures
  171. * manager.addHandler( /\.tga$/i, new TGALoader() );
  172. * ```
  173. *
  174. * @param {string} regex - A regular expression.
  175. * @param {Loader} loader - A loader that should handle matched cases.
  176. * @return {LoadingManager} A reference to this loading manager.
  177. */
  178. this.addHandler = function ( regex, loader ) {
  179. handlers.push( regex, loader );
  180. return this;
  181. };
  182. /**
  183. * Removes the loader for the given regular expression.
  184. *
  185. * @param {string} regex - A regular expression.
  186. * @return {LoadingManager} A reference to this loading manager.
  187. */
  188. this.removeHandler = function ( regex ) {
  189. const index = handlers.indexOf( regex );
  190. if ( index !== - 1 ) {
  191. handlers.splice( index, 2 );
  192. }
  193. return this;
  194. };
  195. /**
  196. * Can be used to retrieve the registered loader for the given file path.
  197. *
  198. * @param {string} file - The file path.
  199. * @return {?Loader} The registered loader. Returns `null` if no loader was found.
  200. */
  201. this.getHandler = function ( file ) {
  202. for ( let i = 0, l = handlers.length; i < l; i += 2 ) {
  203. const regex = handlers[ i ];
  204. const loader = handlers[ i + 1 ];
  205. if ( regex.global ) regex.lastIndex = 0; // see #17920
  206. if ( regex.test( file ) ) {
  207. return loader;
  208. }
  209. }
  210. return null;
  211. };
  212. /**
  213. * Can be used to abort ongoing loading requests in loaders using this manager.
  214. * The abort only works if the loaders implement {@link Loader#abort} and `AbortSignal.any()`
  215. * is supported in the browser.
  216. *
  217. * @return {LoadingManager} A reference to this loading manager.
  218. */
  219. this.abort = function () {
  220. this.abortController.abort();
  221. this.abortController = new AbortController();
  222. return this;
  223. };
  224. }
  225. }
  226. /**
  227. * The global default loading manager.
  228. *
  229. * @constant
  230. * @type {LoadingManager}
  231. */
  232. const DefaultLoadingManager = /*@__PURE__*/ new LoadingManager();
  233. export { DefaultLoadingManager, LoadingManager };
粤ICP备19079148号