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
|
<!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>GLTF加载器（[name]）</h1>
<p class="desc">用于载入<em>glTF 2.0</em>资源的加载器。<br /><br />
[link:https://www.khronos.org/gltf glTF]（gl传输格式）是一种开放格式的规范
（[link:https://github.com/KhronosGroup/glTF/tree/master/specification/2.0 open format specification]），
用于更高效地传输、加载3D内容。该类文件以JSON（.glft）格式或二进制（.glb）格式提供，
外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件可传输一个或多个场景，
包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。
</p>
<h2>扩展</h2>
<p>
GLTFLoader支持下列glTF 2.0扩展（[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>需要[link:https://threejs.org/docs/#api/en/renderers/WebGLRenderer.physicallyCorrectLights physicallyCorrectLights]被启用。
</i></p>
<p><i>
<sup>2</sup>支持UV变换，但存在一些重要的限制。
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.
aoMap 和 lightMap 纹理不能被变换。每个材质最多只能使用一次变换。
每次对使用具有唯一变换的纹理都会导致一次额外的GPU纹理上传。
请参阅#[link:https://github.com/mrdoob/three.js/pull/13831 13831] 和
#[link:https://github.com/mrdoob/three.js/issues/12788 12788]。
</i></p>
<h2>示例</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>浏览器兼容性</h2>
<p>GLTFLoader 依赖 ES6 [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promises]，
这一特性不支持IE11。若要在IE11中使用该加载器，你必须引入polyfill（[link:https://github.com/stefanpenner/es6-promise include a polyfill]）
来提供一个Promise的替代方案。</p>
<h2>纹理</h2>
<p>纹理中包含的颜色信息（.map, .emissiveMap, 和 .specularMap）在glTF中总是使用sRGB颜色空间，而顶点颜色和材质属性（.color, .emissive, .specular）
则使用线性颜色空间。在典型的渲染工作流程中，纹理会被渲染器转换为线性颜色空间，进行光照计算，然后最终输出会被转换回 sRGB
颜色空间并显示在屏幕上。除非你需要使用线性颜色空间进行后期处理，否则请在使用glTF的时候将[page:WebGLRenderer]进行如下配置：</p>
<code>
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
</code>
<p>假设渲染器的配置如上所示，则GLTFLoader将可以正确地自动配置从.gltf或.glb文件中引用的纹理。
当从外部加载纹理（例如，使用[page:TextureLoader]）并将纹理应用到glTF模型，则必须给定对应的颜色空间与朝向：</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>自定义扩展</h2>
<p>
来自未知扩展的元数据会被保存到Object3D、Scene和Material实例中上的“.userData.gltfExtensions”，
或被附加到 response “gltf”对象。示例：
</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>构造函数</h2>
<h3>[name]( [param:LoadingManager manager] )</h3>
<p>
[page:LoadingManager manager] — 该加载器将要使用的 [page:LoadingManager loadingManager] 。默认为 [page:LoadingManager THREE.DefaultLoadingManager]。
</p>
<p>
创建一个新的[name]。
</p>
<h2>属性</h2>
<p>共有属性请参见其基类[page:Loader]。</p>
<h2>方法</h2>
<p>共有方法请参见其基类[page:Loader]。</p>
<h3>[method:null load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:String url] — 包含有<em>.gltf</em>/<em>.glb</em>文件路径/URL的字符串。<br />
[page:Function onLoad] — 加载成功完成后将会被调用的函数。该函数接收[page:Function parse]所返回的已加载的JSON响应。<br />
[page:Function onProgress] — （可选）加载正在进行过程中会被调用的函数。其参数将会是XMLHttpRequest实例，包含有总字节数.[page:Integer total]与已加载的字节数.[page:Integer loaded]。<br />
[page:Function onError] — （可选）若在加载过程发生错误，将被调用的函数。该函数接收error来作为参数。<br />
</p>
<p>
开始从url加载，并使用解析过的响应内容调用回调函数。
</p>
<h3>[method:null setDRACOLoader]( [param:DRACOLoader dracoLoader] )</h3>
<p>
[page:DRACOLoader dracoLoader] — THREE.DRACOLoader的实例，用于解码使用KHR_draco_mesh_compression扩展压缩过的文件。
</p>
<p>
请参阅[link:https://github.com/mrdoob/three.js/tree/dev/examples/js/libs/draco#readme readme]来了解Draco及其解码器的详细信息。
</p>
<h3>[method:null setDDSLoader]( [param:DDSLoader ddsLoader] )</h3>
<p>
[page:DDSLoader ddsLoader] — THREE.DDSLoader的实例，用于加载使用MSFT_TEXTURE_DDS扩展压缩过的纹理。
</p>
<h3>[method:null parse]( [param:ArrayBuffer data], [param:String path], [param:Function onLoad], [param:Function onError] )</h3>
<p>
[page:ArrayBuffer data] — 需要解析的glTF文件，值为一个ArrayBuffer或<em>JSON</em>字符串。<br />
[page:String path] — 用于找到后续glTF资源（如纹理和.bin数据文件）的基础路径。<br />
[page:Function onLoad] — 解析成功完成后将会被调用的函数。<br />
[page:Function onError] — （可选）若在解析过程发生错误，将被调用的函数。该函数接收error来作为参数。<br />
</p>
<p>
解析基于glTF的ArrayBuffer或<em>JSON</em>字符串，并在完成后触发[page:Function onLoad]回调。[page:Function onLoad]的参数将是一个包含有已加载部分的[page:object]：.[page:Scene scene]、 .[page:Array scenes]、 .[page:Array cameras]、 .[page:Array animations] 和 .[page:Object asset]。
</p>
<h2>源代码</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js examples/js/loaders/GLTFLoader.js]
</p>
</body>
</html>
|
