Skip to content

Commit 6ab1bdd

Browse files
richtrmrdoob
richtr
authored and
mrdoob
committedOct 7, 2016
GLTFLoader v2 (#9786)
* Initial GLTFLoader updates so it will also obtain async resources over the network * First take at adding shader support to new GLTFLoader * First working custom shaders version of GLTFLoader.js * Fully working custom GLTF shaders + general library fix-ups * Add skins, animations, lights, extensions and continue to refactor the library * Refactor new GLTFLoader (seperate glTF parsing and internal library building) * Fix GLSL shader update binding to point at the correct nodes + more general refactoring * Make _each thenable and refactor dependencies graph + other minor fixes * Improves spec compliance: primitive.mode is optional * Update GLTFLoader v2 with feedback on PR: #9786 - Replace .set(...) with .fromArray(...) where possible for THREE.js Math objects (thanks @mrdoob) - Include fix for #8381 (thanks @cx20) - Move THREE.GLTFShaders to THREE.GLTFLoader.Shaders - Move THREE.GLTFAnimator to THREE.GLTFLoader.Animations - Rename .setBaseUrl(...) to .setPath(...) - Update demo page 'examples/webgl_loader_gltf_new.html' with renamed APIs * Replace 'examples/webgl_loader_gltf.html' with new version of GLTFLoader * Update documentation at /docs/?q=gltf#Reference/Loaders/GLTFLoader to reference new GLTFLoader * Move /examples/js/loaders/gltf/* to /examples/js/loaders/deprecated/gltf/* * Actually add a fix for #8381 * Re-fix #8381 in a more logical way * Update material parameter checking and validation. * Fix issue whereby the spec says doubleSided and transparent should be in the 'values' section but every use of these params I've seen in the wild has been outside this section * Ambient is not a valid properties for THREE.js materials * THREE textures have flipY set to true by default. By setting to false we can remove double flip from GLTFLoader * Fix issue where Firefox Promise then callback can not correctly keep track of its key * Remove debugging from examples/loaders/deprecated/gltf/glTFLoader.js * Refactor waitForDependencies in to _withDependencies. Remove need for global library.* tracking. Other general refactoring
·
r174r82
1 parent cad8c07 commit 6ab1bdd

File tree

12 files changed

+1669
-282
lines changed

12 files changed

+1669
-282
lines changed
 

‎docs/api/loaders/GLTFLoader.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
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+
14+
<div class="desc">
15+
A loader for loading a <em>.gltf</em> resource in <em>JSON</em> format.
16+
<br /><br />
17+
The <a href="https://www.khronos.org/gltf">glTF file format</a> is a JSON file format to enable rapid delivery and loading of 3D content.
18+
</div>
19+
20+
21+
<h2>Constructor</h2>
22+
23+
<h3>[name]( [page:LoadingManager manager] )</h3>
24+
<div>
25+
[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
26+
</div>
27+
<div>
28+
Creates a new [name].
29+
</div>
30+
31+
<h2>Properties</h2>
32+
33+
34+
<h2>Methods</h2>
35+
36+
<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
37+
<div>
38+
[page:String url] — required<br />
39+
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded JSON response returned from [page:Function parse].<br />
40+
[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 />
41+
[page:Function onError] — Will be called when load errors.<br />
42+
</div>
43+
<div>
44+
Begin loading from url and call the callback function with the parsed response content.
45+
</div>
46+
47+
<h3>[method:null setPath]( [page:String path] )</h3>
48+
<div>
49+
[page:String path] — Base path for loading additional resources e.g. textures, GLSL shaders, .bin data.
50+
</div>
51+
<div>
52+
Set the base path for additional resources.
53+
</div>
54+
55+
<h3>[method:null setCrossOrigin]( [page:String value] )</h3>
56+
<div>
57+
[page:String value] — The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
58+
</div>
59+
60+
<h3>[method:null parse]( [page:Object json], [page:Function callBack], [page:String path] )</h3>
61+
<div>
62+
[page:Object json] — <em>JSON</em> object to parse.<br />
63+
[page:Function callBack] — Will be called when parse completes.<br />
64+
[page:String path] — The base path from which to find subsequent glTF resources such as textures, GLSL shaders and .bin data files.<br />
65+
</div>
66+
<div>
67+
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 cameras], .[page:Array animations] and .[page:Array shaders]
68+
</div>
69+
70+
71+
<h2>Notes</h2>
72+
73+
<div>
74+
When using custom shaders provided within a glTF file [page:THREE.GLTFLoader.Shaders] should be updated on each render loop. See [example:webgl_loader_gltf] demo source code for example usage.
75+
</div>
76+
77+
<div>
78+
This class is often used with [page:THREE.GLTFLoader.Animations THREE.GLTFLoader.Animations] to animate parsed animations. See [example:webgl_loader_gltf] demo source code for example usage.
79+
</div>
80+
81+
<h2>Example</h2>
82+
83+
<code>
84+
// instantiate a loader
85+
var loader = new THREE.GLTFLoader();
86+
87+
// load a glTF resource
88+
loader.load(
89+
// resource URL
90+
'models/gltf/duck/duck.json',
91+
// Function when resource is loaded
92+
function ( object ) {
93+
scene.add( object.scene );
94+
}
95+
);
96+
</code>
97+
98+
[example:webgl_loader_gltf]
99+
100+
101+
<h2>Source</h2>
102+
103+
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js examples/js/loaders/GLTFLoader.js]
104+
</body>
105+
</html>

‎docs/api/loaders/glTFLoader.html

-74
This file was deleted.

‎docs/list.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ var list = {
9393
[ "BufferGeometryLoader", "api/loaders/BufferGeometryLoader" ],
9494
[ "Cache", "api/loaders/Cache" ],
9595
[ "ColladaLoader", "api/loaders/ColladaLoader" ],
96-
[ "glTFLoader", "api/loaders/glTFLoader" ],
96+
[ "GLTFLoader", "api/loaders/GLTFLoader" ],
9797
[ "ImageLoader", "api/loaders/ImageLoader" ],
9898
[ "JSONLoader", "api/loaders/JSONLoader" ],
9999
[ "Loader", "api/loaders/Loader" ],

‎editor/js/libs/tern-threejs/threejs.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2544,8 +2544,8 @@
25442544
"!doc": "A low level class for loading resources with XmlHttpRequest, used internaly by most loaders.",
25452545
"!type": "fn(manager: +THREE.LoadingManager)"
25462546
},
2547-
"glTFLoader": {
2548-
"!url": "http://threejs.org/docs/#Reference/loaders/glTFLoader",
2547+
"GLTFLoader": {
2548+
"!url": "http://threejs.org/docs/#Reference/loaders/GLTFLoader",
25492549
"prototype": {
25502550
"!proto": "THREE.Loader.prototype",
25512551
"load": {

‎examples/js/loaders/GLTFLoader.js

+1,553-193
Large diffs are not rendered by default.

‎examples/webgl_loader_gltf.html

+8-12
Original file line numberDiff line numberDiff line change
@@ -126,11 +126,7 @@
126126
</div>
127127
<script src="../build/three.js"></script>
128128
<script src="js/controls/OrbitControls.js"></script>
129-
<script src="js/loaders/gltf/glTF-parser.js"></script>
130-
<script src="js/loaders/gltf/glTFLoader.js"></script>
131-
<script src="js/loaders/gltf/glTFLoaderUtils.js"></script>
132-
<script src="js/loaders/gltf/glTFAnimation.js"></script>
133-
<script src="js/loaders/gltf/glTFShaders.js"></script>
129+
<script src="js/loaders/GLTFLoader.js"></script>
134130

135131
<script>
136132
var orbitControls = null;
@@ -235,7 +231,8 @@
235231
scene.add(ground);
236232
}
237233

238-
loader = new THREE.glTFLoader;
234+
THREE.GLTFLoader.Shaders.removeAll(); // remove all previous shaders
235+
loader = new THREE.GLTFLoader;
239236
var loadStartTime = Date.now();
240237
var status = document.getElementById("status");
241238
status.innerHTML = "Loading...";
@@ -356,8 +353,8 @@
356353

357354
function animate() {
358355
requestAnimationFrame( animate );
359-
THREE.glTFAnimator.update();
360-
THREE.glTFShaders.update(scene, camera);
356+
THREE.GLTFLoader.Animations.update();
357+
THREE.GLTFLoader.Shaders.update(scene, camera);
361358
if (cameraIndex == 0)
362359
orbitControls.update();
363360
render();
@@ -393,8 +390,8 @@
393390
{
394391
name : "Monster", url : "./models/gltf/monster/%s/monster.gltf",
395392
cameraPos: new THREE.Vector3(30, 10, 70),
396-
objectScale: new THREE.Vector3(0.01, 0.01, 0.01),
397-
objectPosition: new THREE.Vector3(2, 6, 0),
393+
objectScale: new THREE.Vector3(0.4, 0.4, 0.4),
394+
objectPosition: new THREE.Vector3(2, 1, 0),
398395
objectRotation: new THREE.Euler(0, - 3 * Math.PI / 4, 0),
399396
animationTime: 3,
400397
addLights:true,
@@ -423,8 +420,7 @@
423420
addLights:true,
424421
addGround:true,
425422
shadows:true
426-
},
427-
423+
}
428424
];
429425

430426
function buildSceneList() {

0 commit comments

Comments
 (0)
Please sign in to comment.