GLTF2Loader.html 4.1 KB

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