GLTFLoader.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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. [page:Loader] &rarr;
  12. <h1>[name]</h1>
  13. <p class="desc"> A loader for <em>glTF 2.0</em> resources. <br /><br />
  14. [link:https://www.khronos.org/gltf glTF] (GL Transmission Format) is an
  15. [link:https://github.com/KhronosGroup/glTF/tree/master/specification/2.0 open format specification]
  16. for efficient delivery and loading of 3D content. Assets may be provided either in JSON (.gltf)
  17. or binary (.glb) format. External files store textures (.jpg, .png) and additional binary
  18. data (.bin). A glTF asset may deliver one or more scenes, including meshes, materials,
  19. textures, skins, skeletons, morph targets, animations, lights, and/or cameras.
  20. </p>
  21. <h2>Extensions</h2>
  22. <p>
  23. GLTFLoader supports the following
  24. [link:https://github.com/KhronosGroup/glTF/tree/master/extensions/ glTF 2.0 extensions]:
  25. </p>
  26. <ul>
  27. <li>KHR_draco_mesh_compression</li>
  28. <li>KHR_materials_pbrSpecularGlossiness</li>
  29. <li>KHR_materials_unlit</li>
  30. <li>KHR_lights_punctual (experimental)</li>
  31. </ul>
  32. <h2>Example</h2>
  33. <code>
  34. // Instantiate a loader
  35. var loader = new THREE.GLTFLoader();
  36. // Optional: Provide a DRACOLoader instance to decode compressed mesh data
  37. THREE.DRACOLoader.setDecoderPath( '/examples/js/libs/draco' );
  38. loader.setDRACOLoader( new THREE.DRACOLoader() );
  39. // Load a glTF resource
  40. loader.load(
  41. // resource URL
  42. 'models/gltf/duck/duck.gltf',
  43. // called when the resource is loaded
  44. function ( gltf ) {
  45. scene.add( gltf.scene );
  46. gltf.animations; // Array&lt;THREE.AnimationClip&gt;
  47. gltf.scene; // THREE.Scene
  48. gltf.scenes; // Array&lt;THREE.Scene&gt;
  49. gltf.cameras; // Array&lt;THREE.Camera&gt;
  50. gltf.asset; // Object
  51. },
  52. // called while loading is progressing
  53. function ( xhr ) {
  54. console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
  55. },
  56. // called when loading has errors
  57. function ( error ) {
  58. console.log( 'An error happened' );
  59. }
  60. );
  61. </code>
  62. [example:webgl_loader_gltf]
  63. <h2>Browser compatibility</h2>
  64. <p>GLTFLoader relies on ES6 [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promises],
  65. which are not supported in IE11. To use the loader in IE11, you must
  66. [link:https://github.com/stefanpenner/es6-promise include a polyfill]
  67. providing a Promise replacement.</p>
  68. <h2>Custom extensions</h2>
  69. <p>
  70. Metadata from unknown extensions is preserved as “.userData.gltfExtensions” on Object3D, Scene, and Material instances,
  71. or attached to the response “gltf” object. Example:
  72. </p>
  73. <code>
  74. loader.load('foo.gltf', function ( gltf ) {
  75. var scene = gltf.scene;
  76. var mesh = scene.children[ 3 ];
  77. var fooExtension = mesh.userData.gltfExtensions.EXT_foo;
  78. gltf.parser.getDependency( 'bufferView', fooExtension.bufferView )
  79. .then( function ( fooBuffer ) { ... } );
  80. } );
  81. </code>
  82. <br>
  83. <hr>
  84. <h2>Constructor</h2>
  85. <h3>[name]( [param:LoadingManager manager] )</h3>
  86. <p>
  87. [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
  88. </p>
  89. <p>
  90. Creates a new [name].
  91. </p>
  92. <h2>Properties</h2>
  93. <h2>Methods</h2>
  94. <h3>[method:null load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
  95. <p>
  96. [page:String url] — A string containing the path/URL of the <em>.gltf</em> or <em>.glb</em> file.<br />
  97. [page:Function onLoad] — A function to be called after the loading is successfully completed. The function receives the loaded JSON response returned from [page:Function parse].<br />
  98. [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.<br />
  99. [page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
  100. </p>
  101. <p>
  102. Begin loading from url and call the callback function with the parsed response content.
  103. </p>
  104. <h3>[method:null setPath]( [param:String path] )</h3>
  105. <p>
  106. [page:String path] — Base path for loading additional resources e.g. textures and .bin data.
  107. </p>
  108. <p>
  109. Set the base path for additional resources.
  110. </p>
  111. <h3>[method:null setCrossOrigin]( [param:String value] )</h3>
  112. <p>
  113. [page:String value] — The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
  114. </p>
  115. <h3>[method:null setDRACOLoader]( [param:DRACOLoader dracoLoader] )</h3>
  116. <p>
  117. [page:DRACOLoader dracoLoader] — Instance of THREE.DRACOLoader, to be used for decoding assets compressed with the KHR_draco_mesh_compression extension.
  118. </p>
  119. <p>
  120. Refer to this [link:https://github.com/mrdoob/three.js/tree/dev/examples/js/libs/draco#readme readme] for the details of Draco and its decoder.
  121. </p>
  122. <h3>[method:null parse]( [param:ArrayBuffer data], [param:String path], [param:Function onLoad], [param:Function onError] )</h3>
  123. <p>
  124. [page:ArrayBuffer data] — glTF asset to parse, as an ArrayBuffer or <em>JSON</em> string.<br />
  125. [page:String path] — The base path from which to find subsequent glTF resources such as textures and .bin data files.<br />
  126. [page:Function onLoad] — A function to be called when parse completes.<br />
  127. [page:Function onError] — (optional) A function to be called if an error occurs during parsing. The function receives error as an argument.<br />
  128. </p>
  129. <p>
  130. Parse a glTF-based ArrayBuffer or <em>JSON</em> String and fire [page:Function onLoad] callback when complete. The argument to [page:Function onLoad] will be an [page:object] that contains loaded parts: .[page:Scene scene], .[page:Array scenes], .[page:Array cameras], .[page:Array animations], and .[page:Object asset].
  131. </p>
  132. <h2>Source</h2>
  133. [link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js examples/js/loaders/GLTFLoader.js]
  134. </body>
  135. </html>