DRACOLoader.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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. [page:Loader] &rarr;
  11. <h1>[name]</h1>
  12. <p class="desc">
  13. A loader for geometry compressed with the Draco library. <br /><br />
  14. [link:https://google.github.io/draco/ Draco] is an open source library for compressing and
  15. decompressing 3D meshes and point clouds. Compressed geometry can be significantly smaller,
  16. at the cost of additional decoding time on the client device.
  17. </p>
  18. <p>
  19. Standalone Draco files have a `.drc` extension, and contain vertex positions,
  20. normals, colors, and other attributes. Draco files *do not* contain materials,
  21. textures, animation, or node hierarchies – to use these features, embed Draco geometry
  22. inside of a glTF file. A normal glTF file can be converted to a Draco-compressed glTF file
  23. using [link:https://github.com/AnalyticalGraphicsInc/gltf-pipeline glTF-Pipeline]. When
  24. using Draco with glTF, an instance of DRACOLoader will be used internally by [page:GLTFLoader].
  25. </p>
  26. <p>
  27. It is recommended to create one DRACOLoader instance and reuse it to avoid loading and creating multiple
  28. decoder instances.
  29. </p>
  30. <h2>Import</h2>
  31. <p>
  32. [name] is an add-on, and must be imported explicitly.
  33. See [link:#manual/introduction/Installation Installation / Addons].
  34. </p>
  35. <code>
  36. import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
  37. </code>
  38. <h2>Code Example</h2>
  39. <code>
  40. // Instantiate a loader
  41. const loader = new DRACOLoader();
  42. // Specify path to a folder containing WASM/JS decoding libraries.
  43. loader.setDecoderPath( '/examples/jsm/libs/draco/' );
  44. // Optional: Pre-fetch Draco WASM/JS module.
  45. loader.preload();
  46. // Load a Draco geometry
  47. loader.load(
  48. // resource URL
  49. 'model.drc',
  50. // called when the resource is loaded
  51. function ( geometry ) {
  52. const material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
  53. const mesh = new THREE.Mesh( geometry, material );
  54. scene.add( mesh );
  55. },
  56. // called as loading progresses
  57. function ( xhr ) {
  58. console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  59. },
  60. // called when loading has errors
  61. function ( error ) {
  62. console.log( 'An error happened' );
  63. }
  64. );
  65. </code>
  66. <h2>Examples</h2>
  67. <p>
  68. [example:webgl_loader_draco]
  69. </p>
  70. <h2>Browser compatibility</h2>
  71. <p>DRACOLoader will automatically use either the JS or the WASM decoding library, based on browser capabilities.</p>
  72. <br>
  73. <hr>
  74. <h2>Constructor</h2>
  75. <h3>[name]( [param:LoadingManager manager] )</h3>
  76. <p>
  77. [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
  78. </p>
  79. <p>
  80. Creates a new [name].
  81. </p>
  82. <h2>Properties</h2>
  83. <p>See the base [page:Loader] class for common properties.</p>
  84. <h2>Methods</h2>
  85. <p>See the base [page:Loader] class for common methods.</p>
  86. <h3>[method:undefined load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
  87. <p>
  88. [page:String url] — A string containing the path/URL of the `.drc` file.<br />
  89. [page:Function onLoad] — A function to be called after the loading is successfully completed.<br />
  90. [page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes. If the server does not set the Content-Length header; .[page:Integer total] will be 0.<br />
  91. [page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
  92. </p>
  93. <p>
  94. Begin loading from url and call the `onLoad` function with the decompressed geometry.
  95. </p>
  96. <h3>[method:this setDecoderPath]( [param:String value] )</h3>
  97. <p>
  98. [page:String value] — Path to folder containing the JS and WASM decoder libraries.
  99. </p>
  100. <h3>[method:this setDecoderConfig]( [param:Object config] )</h3>
  101. <p>
  102. [page:String config.type] - (Optional) `"js"` or `"wasm"`.<br />
  103. </p>
  104. <p>
  105. Provides configuration for the decoder libraries. Configuration cannot be changed
  106. after decoding begins.
  107. </p>
  108. <h3>[method:this setWorkerLimit]( [param:Number workerLimit] )</h3>
  109. <p>
  110. [page:Number workerLimit] - Maximum number of workers to be allocated. Default is 4.<br />
  111. </p>
  112. <p>
  113. Sets the maximum number of [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers Web Workers]
  114. to be used during decoding. A lower limit may be preferable if workers are also for other tasks
  115. in the application.
  116. </p>
  117. <h3>[method:this preload]()</h3>
  118. <p>
  119. Requests the decoder libraries, if not already loaded.
  120. </p>
  121. <h3>[method:this dispose]()</h3>
  122. <p>
  123. Disposes of the decoder resources and deallocates memory. The decoder
  124. [link:https://github.com/google/draco/issues/349 cannot be reloaded afterward].
  125. </p>
  126. <h2>Source</h2>
  127. <p>
  128. [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/loaders/DRACOLoader.js examples/jsm/loaders/DRACOLoader.js]
  129. </p>
  130. </body>
  131. </html>