1
0

GLTFExporter.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  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. <h1>[name]</h1>
  11. <p class="desc">
  12. An exporter for `glTF` 2.0.
  13. <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>Import</h2>
  22. <p>
  23. [name] is an add-on, and must be imported explicitly.
  24. See [link:#manual/introduction/Installation Installation / Addons].
  25. </p>
  26. <code>
  27. import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
  28. </code>
  29. <h2>Extensions</h2>
  30. <p>
  31. GLTFExporter supports the following
  32. [link:https://github.com/KhronosGroup/glTF/tree/master/extensions/ glTF 2.0 extensions]:
  33. </p>
  34. <ul>
  35. <li>KHR_lights_punctual</li>
  36. <li>KHR_materials_clearcoat</li>
  37. <li>KHR_materials_dispersion</li>
  38. <li>KHR_materials_emissive_strength</li>
  39. <li>KHR_materials_ior</li>
  40. <li>KHR_materials_iridescence</li>
  41. <li>KHR_materials_specular</li>
  42. <li>KHR_materials_sheen</li>
  43. <li>KHR_materials_transmission</li>
  44. <li>KHR_materials_unlit</li>
  45. <li>KHR_materials_volume</li>
  46. <li>KHR_mesh_quantization</li>
  47. <li>KHR_texture_transform</li>
  48. </ul>
  49. <p>
  50. The following glTF 2.0 extension is supported by an external user plugin
  51. </p>
  52. <ul>
  53. <li>[link:https://github.com/takahirox/three-gltf-extensions KHR_materials_variants]</li>
  54. </ul>
  55. <h2>Code Example</h2>
  56. <code>
  57. // Instantiate a exporter
  58. const exporter = new GLTFExporter();
  59. // Parse the input and generate the glTF output
  60. exporter.parse(
  61. scene,
  62. // called when the gltf has been generated
  63. function ( gltf ) {
  64. console.log( gltf );
  65. downloadJSON( gltf );
  66. },
  67. // called when there is an error in the generation
  68. function ( error ) {
  69. console.log( 'An error happened' );
  70. },
  71. options
  72. );
  73. </code>
  74. <h2>Examples</h2>
  75. <p>
  76. [example:misc_exporter_gltf]
  77. </p>
  78. <h2>Constructor</h2>
  79. <h3>[name]()</h3>
  80. <p>
  81. </p>
  82. <p>
  83. Creates a new [name].
  84. </p>
  85. <h2>Methods</h2>
  86. <h3>[method:undefined parse]( [param:Object3D input], [param:Function onCompleted], [param:Function onError], [param:Object options] )</h3>
  87. <p>
  88. [page:Object input] — Scenes or objects to export. Valid options:<br />
  89. <ul>
  90. <li>
  91. Export scenes
  92. <code>
  93. exporter.parse( scene1, ... )
  94. exporter.parse( [ scene1, scene2 ], ... )
  95. </code>
  96. </li>
  97. <li>
  98. Export objects (It will create a new Scene to hold all the objects)
  99. <code>
  100. exporter.parse( object1, ... )
  101. exporter.parse( [ object1, object2 ], ... )
  102. </code>
  103. </li>
  104. <li>
  105. Mix scenes and objects (It will export the scenes as usual but it will create a new scene to hold all the single objects).
  106. <code>
  107. exporter.parse( [ scene1, object1, object2, scene2 ], ... )
  108. </code>
  109. </li>
  110. </ul>
  111. [page:Function onCompleted] — Will be called when the export completes. The argument will be the generated glTF JSON or binary ArrayBuffer.<br />
  112. [page:Function onError] — Will be called if there are any errors during the gltf generation.<br />
  113. [page:Options options] — Export options<br />
  114. <ul>
  115. <li>`trs` - bool. Export position, rotation and scale instead of matrix per node. Default is false</li>
  116. <li>`onlyVisible` - bool. Export only visible objects. Default is true.</li>
  117. <li>`binary` - bool. Export in binary (.glb) format, returning an ArrayBuffer. Default is false.</li>
  118. <li>`maxTextureSize` - int. Restricts the image maximum size (both width and height) to the given value. Default is Infinity.</li>
  119. <li>`animations` - Array<[page:AnimationClip AnimationClip]>. List of animations to be included in the export.</li>
  120. <li>`includeCustomExtensions` - bool. Export custom glTF extensions defined on an object's `userData.gltfExtensions` property. Default is false.</li>
  121. </ul>
  122. </p>
  123. <p>
  124. Generates a .gltf (JSON) or .glb (binary) output from the input (Scenes or Objects)
  125. </p>
  126. <h3>[method:Promise parseAsync]( [param:Object3D input], [param:Object options] )</h3>
  127. <p>
  128. Generates a .gltf (JSON) or .glb (binary) output from the input (Scenes or Objects).
  129. </p>
  130. <p>
  131. This is just like the [page:.parse]() method, but instead of
  132. accepting callbacks it returns a promise that resolves with the
  133. result, and otherwise accepts the same options.
  134. </p>
  135. <h2>Source</h2>
  136. <p>
  137. [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/exporters/GLTFExporter.js examples/jsm/exporters/GLTFExporter.js]
  138. </p>
  139. </body>
  140. </html>