GLTF2Loader.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  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. <div class="desc">
  14. A loader for *glTF* 2.0 resources.
  15. <br /><br />
  16. <a href="https://www.khronos.org/gltf">glTF</a> (GL Transmission Format) is an
  17. <a href="https://github.com/KhronosGroup/glTF/tree/master/specification/2.0">open format specification</a>
  18. for efficient delivery and loading of 3D content. Assets may be provided either in JSON (.gltf)
  19. or binary (.glb) format. External files store textures (.jpg, .png, ...) and additional binary
  20. data (.bin). A glTF asset may deliver one or more scenes, including meshes, materials,
  21. textures, shaders, skins, skeletons, morph targets, animations, lights, and/or cameras.
  22. </div>
  23. <h2>Extensions</h2>
  24. <div>
  25. GLTF2Loader supports the following glTF extensions:
  26. </div>
  27. <ul>
  28. <li>
  29. KHR_lights
  30. </li>
  31. <li>
  32. <a target="_blank" href="https://github.com/KhronosGroup/glTF/tree/master/extensions/Khronos/KHR_materials_common">
  33. KHR_materials_common
  34. </a>
  35. </li>
  36. <li>
  37. <a target="_blank" href="https://github.com/KhronosGroup/glTF/tree/master/extensions/Khronos/KHR_materials_pbrSpecularGlossiness">
  38. KHR_materials_pbrSpecularGlossiness
  39. </a>
  40. </li>
  41. </ul>
  42. <h2>Example</h2>
  43. <code>
  44. // Instantiate a loader
  45. var loader = new THREE.GLTF2Loader();
  46. // Load a glTF resource
  47. loader.load( 'models/gltf/duck/duck.gltf', function ( gltf ) {
  48. scene.add( gltf.scene );
  49. gltf.animations; // Array&lt;THREE.AnimationClip&gt;
  50. gltf.scene; // THREE.Scene
  51. gltf.scenes; // Array&lt;THREE.Scene&gt;
  52. gltf.cameras; // Array&lt;THREE.Camera&gt;
  53. } );
  54. </code>
  55. [example:webgl_loader_gltf2]
  56. <h2>Constructor</h2>
  57. <h3>[name]( [page:LoadingManager manager] )</h3>
  58. <div>
  59. [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
  60. </div>
  61. <div>
  62. Creates a new [name].
  63. </div>
  64. <h2>Properties</h2>
  65. <h2>Methods</h2>
  66. <h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
  67. <div>
  68. [page:String url] — required<br />
  69. [page:Function onLoad] — Will be called when load completes. The argument will be the loaded JSON response returned from [page:Function parse].<br />
  70. [page:Function onProgress] — Will be called while load progresses. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
  71. [page:Function onError] — Will be called when load errors.<br />
  72. </div>
  73. <div>
  74. Begin loading from url and call the callback function with the parsed response content.
  75. </div>
  76. <h3>[method:null setPath]( [page:String path] )</h3>
  77. <div>
  78. [page:String path] — Base path for loading additional resources e.g. textures, GLSL shaders, .bin data.
  79. </div>
  80. <div>
  81. Set the base path for additional resources.
  82. </div>
  83. <h3>[method:null setCrossOrigin]( [page:String value] )</h3>
  84. <div>
  85. [page:String value] — The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
  86. </div>
  87. <h3>[method:null parse]( [page:Object json], [page:Function callBack], [page:String path] )</h3>
  88. <div>
  89. [page:Object json] — <em>JSON</em> object to parse.<br />
  90. [page:Function callBack] — Will be called when parse completes.<br />
  91. [page:String path] — The base path from which to find subsequent glTF resources such as textures, GLSL shaders and .bin data files.<br />
  92. </div>
  93. <div>
  94. Parse a glTF-based <em>JSON</em> structure and fire [page:Function callback] when complete. The argument to [page:Function callback] will be an [page:object] that contains loaded parts: .[page:Scene scene], .[page:Array scenes], .[page:Array cameras], and .[page:Array animations].
  95. </div>
  96. <h2>Source</h2>
  97. [link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTF2Loader.js examples/js/loaders/GLTF2Loader.js]
  98. </body>
  99. </html>