LoadingManager.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  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. <p class="desc">
  13. 其功能时处理并跟踪已加载和待处理的数据。如果未手动设置加强管理器,则会为加载器创建和使用默认全局实例加载器管理器
  14. - 请参阅 [page:DefaultLoadingManager].<br /><br />
  15. 一般来说,默认的加载管理器已足够使用了,但有时候也需要设置单独的加载器 - 例如,如果你想为对象和纹理显示单独的加载条。
  16. </p>
  17. <h2>例子</h2>
  18. <p>
  19. [example:webgl_loader_babylon WebGL / loader / babylon]<br />
  20. [example:webgl_loader_fbx WebGL / loader / fbx]<br />
  21. [example:webgl_loader_obj WebGL / loader / obj]<br />
  22. [example:webgl_materials_reflectivity WebGL / materials / reflectivity]<br />
  23. [example:webgl_postprocessing_outline WebGL / postprocesing / outline]<br />
  24. [example:webgl_terrain_dynamic WebGL / terrain / dynamic]
  25. </p>
  26. <p>
  27. 下面的例子将介绍,如何使用加载管理器来跟踪 [page:OBJLoader] 的加载进度流程。
  28. </p>
  29. <code>
  30. var manager = new THREE.LoadingManager();
  31. manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
  32. console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
  33. };
  34. manager.onLoad = function ( ) {
  35. console.log( 'Loading complete!');
  36. };
  37. manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
  38. console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
  39. };
  40. manager.onError = function ( url ) {
  41. console.log( 'There was an error loading ' + url );
  42. };
  43. var loader = new THREE.OBJLoader( manager );
  44. loader.load( 'file.obj', function ( object ) {
  45. //
  46. } );
  47. </code>
  48. <p>
  49. 除了观察进度流程之外,还可以使用LoadingManager在加载期间覆写资源URL。当某资源来自拖拽事件、
  50. WebSockets、WebRTC或其他API时,此方法可以有所帮助。下面显示了如何使用Blob URL加载内存模型的示例。
  51. </p>
  52. <code>
  53. // 将文件拖入网页时创建的Blob或File对象。
  54. var blobs = {'fish.gltf': blob1, 'diffuse.png': blob2, 'normal.png': blob3};
  55. var manager = new THREE.LoadingManager();
  56. // 使用URL回调初始化加载管理器。
  57. var objectURLs = [];
  58. manager.setURLModifier( ( url ) => {
  59. url = URL.createObjectURL( blobs[ url ] );
  60. objectURLs.push( url );
  61. return url;
  62. } );
  63. // 像通常一样加载,然后撤消blob URL
  64. var loader = new THREE.GLTFLoader( manager );
  65. loader.load( 'fish.gltf', (gltf) => {
  66. scene.add( gltf.scene );
  67. objectURLs.forEach( ( url ) => URL.revokeObjectURL( url ) );
  68. });
  69. </code>
  70. <h2>构造方法</h2>
  71. <h3>[name]( [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
  72. <p>
  73. [page:Function onLoad] — (可选) 所有加载器加载完成后,将调用此函数。<br />
  74. [page:Function onProgress] — (可选) 当每个项目完成后,将调用此函数。<br />
  75. [page:Function onError] — (可选) 当一个加载器遇到错误时,将调用此函数。 <br />
  76. 创建一个新的 [name].
  77. </p>
  78. <h2>属性</h2>
  79. <h3>[property:Function onStart]</h3>
  80. <p>
  81. 此换上咋加载开始时,被调用.
  82. 有如下参数:<br />
  83. [page:String url] — 被加载的项的url。<br />
  84. [page:Integer itemsLoaded] — 目前已加载项的个数。<br />
  85. [page:Iteger itemsTotal] — 总共所需要加载项的个数。<br /><br />
  86. 此方法默认时未定义。
  87. </p>
  88. <h3>[property:Function onLoad]</h3>
  89. <p>
  90. 所有的项加载完成后将调用此函数。默认情况下,此方法时未定义的,除非在构造函数中进行传递。
  91. </p>
  92. <h3>[property:Function onProgress]</h3>
  93. <p>
  94. 此方法加载每一个项,加载完成时进行调用。
  95. 有如下参数:<br />
  96. [page:String url] — 被加载的项的url。<br />
  97. [page:Integer itemsLoaded] — 目前已加载项的个数。<br />
  98. [page:Iteger itemsTotal] — 总共所需要加载项的个数。<br /><br />
  99. 默认情况下,此方法时未定义的,除非在构造函数中进行传递。
  100. </p>
  101. <h3>[property:Function onError]</h3>
  102. <p>
  103. 此方法将在任意项加载错误时,进行调用。
  104. 有如下参数:<br />
  105. [page:String url] — 所加载出错误的项的url<br /><br />
  106. 默认情况下,此方法时未定义的,除非在构造函数中进行传递。
  107. </p>
  108. <h2>方法</h2>
  109. <h3>[method:null setURLModifier]( [param:Function callback] )</h3>
  110. <p>
  111. [page:Function callback] —
  112. 设置URL修饰符成功时回调。使用url参数进行回调,并且必须返回 [page:String resolvedURL] 。<br /><br />
  113. 如果设置了回调,则在发送请求之前将向每个资源URL传递回调。回调可以返回最初的URL,也可以返回新URL以覆盖加载行为。
  114. 此行为可用于从.ZIP、拖拽API和数据URI中加载资源文件。
  115. </p>
  116. <h3>[method:String resolveURL]( [param:String url] )</h3>
  117. <p>
  118. [page:String url] — 所要加载的url<br /><br />
  119. 给定URL,使用URL修饰符回调(如果有)并返回已解析的URL。如果未设置URL修饰符,则返回原始URL。
  120. </p>
  121. <br /><br />
  122. <p>
  123. <em>Note: The following methods are designed to be called internally by loaders. You shouldn't call
  124. them directly.</em>
  125. </p>
  126. <h3>[method:null itemStart]( [param:String url] )</h3>
  127. <p>
  128. [page:String url] — 所要加载的url<br /><br />
  129. 任何使用管理器的加载器都会调用此方法, 当加载器需要开始加载URL时。
  130. </p>
  131. <h3>[method:null itemEnd]( [param:String url] )</h3>
  132. <p>
  133. [page:String url] — 所要加载的url<br /><br />
  134. 任何使用管理器的加载器都会调用此方法, 当加载器需要加载URL结束时。
  135. </p>
  136. <h3>[method:null itemError]( [param:String url] )</h3>
  137. <p>
  138. [page:String url] — 所要加载的url<br /><br />
  139. 任何使用管理器的加载器都会调用此方法, 当加载器出现加载错误时。
  140. </p>
  141. <h2>源</h2>
  142. [link:https://github.com/mrdoob/three.js/blob/master/src/loaders/LoadingManager.js src/loaders/LoadingManager.js]
  143. </body>
  144. </html>