1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Loader] →
<h1>[name]</h1>
<p class="desc"> A loader for <em>glTF 2.0</em> resources. <br /><br />
[link:https://www.khronos.org/gltf glTF] (GL Transmission Format) is an
[link:https://github.com/KhronosGroup/glTF/tree/master/specification/2.0 open format specification]
for efficient delivery and loading of 3D content. Assets may be provided either in JSON (.gltf)
or binary (.glb) format. External files store textures (.jpg, .png) and additional binary
data (.bin). A glTF asset may deliver one or more scenes, including meshes, materials,
textures, skins, skeletons, morph targets, animations, lights, and/or cameras.
</p>
<h2>Extensions</h2>
<p>
GLTFLoader supports the following
[link:https://github.com/KhronosGroup/glTF/tree/master/extensions/ glTF 2.0 extensions]:
</p>
<ul>
<li>KHR_draco_mesh_compression</li>
<li>KHR_materials_pbrSpecularGlossiness</li>
<li>KHR_materials_unlit</li>
<li>KHR_mesh_quantization</li>
<li>KHR_lights_punctual<sup>1</sup></li>
<li>KHR_texture_transform<sup>2</sup></li>
<li>MSFT_texture_dds</li>
</ul>
<p><i>
<sup>1</sup>Requires [link:https://threejs.org/docs/#api/en/renderers/WebGLRenderer.physicallyCorrectLights physicallyCorrectLights] to be enabled.
</i></p>
<p><i>
<sup>2</sup>UV transforms are supported, with several key limitations. Transforms applied to
a texture using the first UV slot (all textures except aoMap and lightMap) must share the same
transform, or no transfor at all. The aoMap and lightMap textures cannot be transformed. No
more than one transform may be used per material. Each use of a texture with a unique
transform will result in an additional GPU texture upload. See
#[link:https://github.com/mrdoob/three.js/pull/13831 13831] and
#[link:https://github.com/mrdoob/three.js/issues/12788 12788].
</i></p>
<h2>Example</h2>
<code>
// Instantiate a loader
var loader = new THREE.GLTFLoader();
// Optional: Provide a DRACOLoader instance to decode compressed mesh data
var dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath( '/examples/js/libs/draco/' );
loader.setDRACOLoader( dracoLoader );
// Load a glTF resource
loader.load(
// resource URL
'models/gltf/duck/duck.gltf',
// called when the resource is loaded
function ( gltf ) {
scene.add( gltf.scene );
gltf.animations; // Array<THREE.AnimationClip>
gltf.scene; // THREE.Scene
gltf.scenes; // Array<THREE.Scene>
gltf.cameras; // Array<THREE.Camera>
gltf.asset; // Object
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
</code>
[example:webgl_loader_gltf]
<h2>Browser compatibility</h2>
<p>GLTFLoader relies on ES6 [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promises],
which are not supported in IE11. To use the loader in IE11, you must
[link:https://github.com/stefanpenner/es6-promise include a polyfill]
providing a Promise replacement.</p>
<h2>Textures</h2>
<p>Textures containing color information (.map, .emissiveMap, and .specularMap) always use sRGB colorspace in
glTF, while vertex colors and material properties (.color, .emissive, .specular) use linear colorspace. In a
typical rendering workflow, textures are converted to linear colorspace by the renderer, lighting calculations
are made, then final output is converted back to sRGB and displayed on screen. Unless you need post-processing
in linear colorspace, always configure [page:WebGLRenderer] as follows when using glTF:</p>
<code>
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
</code>
<p>GLTFLoader will automatically configure textures referenced from a .gltf or .glb file correctly, with the
assumption that the renderer is set up as shown above. When loading textures externally (e.g., using
[page:TextureLoader]) and applying them to a glTF model, colorspace and orientation must be given:</p>
<code>
// If texture is used for color information, set colorspace.
texture.encoding = THREE.sRGBEncoding;
// UVs use the convention that (0, 0) corresponds to the upper left corner of a texture.
texture.flipY = false;
</code>
<h2>Custom extensions</h2>
<p>
Metadata from unknown extensions is preserved as “.userData.gltfExtensions” on Object3D, Scene, and Material instances,
or attached to the response “gltf” object. Example:
</p>
<code>
loader.load('foo.gltf', function ( gltf ) {
var scene = gltf.scene;
var mesh = scene.children[ 3 ];
var fooExtension = mesh.userData.gltfExtensions.EXT_foo;
gltf.parser.getDependency( 'bufferView', fooExtension.bufferView )
.then( function ( fooBuffer ) { ... } );
} );
</code>
<br>
<hr>
<h2>Constructor</h2>
<h3>[name]( [param:LoadingManager manager] )</h3>
<p>
[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
</p>
<p>
Creates a new [name].
</p>
<h2>Properties</h2>
<p>See the base [page:Loader] class for common properties.</p>
<h2>Methods</h2>
<p>See the base [page:Loader] class for common methods.</p>
<h3>[method:null load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:String url] — A string containing the path/URL of the <em>.gltf</em> or <em>.glb</em> file.<br />
[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 />
[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 />
[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
</p>
<p>
Begin loading from url and call the callback function with the parsed response content.
</p>
<h3>[method:null setDRACOLoader]( [param:DRACOLoader dracoLoader] )</h3>
<p>
[page:DRACOLoader dracoLoader] — Instance of THREE.DRACOLoader, to be used for decoding assets compressed with the KHR_draco_mesh_compression extension.
</p>
<p>
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.
</p>
<h3>[method:null setDDSLoader]( [param:DDSLoader ddsLoader] )</h3>
<p>
[page:DDSLoader ddsLoader] — Instance of THREE.DDSLoader, to be used for loading compressed textures with the MSFT_TEXTURE_DDS extension.
</p>
<h3>[method:null parse]( [param:ArrayBuffer data], [param:String path], [param:Function onLoad], [param:Function onError] )</h3>
<p>
[page:ArrayBuffer data] — glTF asset to parse, as an ArrayBuffer or <em>JSON</em> string.<br />
[page:String path] — The base path from which to find subsequent glTF resources such as textures and .bin data files.<br />
[page:Function onLoad] — A function to be called when parse completes.<br />
[page:Function onError] — (optional) A function to be called if an error occurs during parsing. The function receives error as an argument.<br />
</p>
<p>
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].
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js examples/js/loaders/GLTFLoader.js]
</p>
</body>
</html>
|
