提交 6ab1bdd0 编写于 作者: R Rich Tibbett 提交者: Mr.doob

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: https://github.com/mrdoob/three.js/pull/9786

- Replace .set(...) with .fromArray(...) where possible for THREE.js Math objects (thanks @mrdoob)
- Include fix for https://github.com/mrdoob/three.js/issues/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 https://github.com/mrdoob/three.js/issues/8381

* Re-fix https://github.com/mrdoob/three.js/issues/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
上级 cad8c07f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......@@ -20,7 +20,10 @@
<h2>Constructor</h2>
<h3>[name]( )</h3>
<h3>[name]( [page:LoadingManager manager] )</h3>
<div>
[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
</div>
<div>
Creates a new [name].
</div>
......@@ -30,28 +33,56 @@
<h2>Methods</h2>
<h3>[method:Object3D load]( [page:String url], [page:Function callback] )</h3>
<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div>
[page:String url] — required<br />
[page:Function callback] — Will be called when load completes. The argument will be an [page:Object] containing the loaded .[page:Object3D scene], .[page:Array cameras] and .[page:Array animations].<br />
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded JSON response returned from [page:Function parse].<br />
[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 />
[page:Function onError] — Will be called when load errors.<br />
</div>
<div>
Begin loading from url and call the callback function with the parsed response content.
</div>
<h3>[method:null setPath]( [page:String path] )</h3>
<div>
[page:String path] — Base path for loading additional resources e.g. textures, GLSL shaders, .bin data.
</div>
<div>
Set the base path for additional resources.
</div>
<h3>[method:null setCrossOrigin]( [page:String value] )</h3>
<div>
[page:String value] — The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
</div>
<h3>[method:null parse]( [page:Object json], [page:Function callBack], [page:String path] )</h3>
<div>
[page:Object json] — <em>JSON</em> object to parse.<br />
[page:Function callBack] — Will be called when parse completes.<br />
[page:String path] — The base path from which to find subsequent glTF resources such as textures, GLSL shaders and .bin data files.<br />
</div>
<div>
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]
</div>
<h2>Notes</h2>
<div>
This class is often used with [page:glTFAnimator THREE.glTFAnimator] to animate parsed animations.
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.
</div>
<div>
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.
</div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.glTFLoader();
var loader = new THREE.GLTFLoader();
// load a glTF resource
loader.load(
......@@ -69,6 +100,6 @@
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/gltf/glTFLoader.js examples/js/loaders/gltf/glTFLoader.js]
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js examples/js/loaders/GLTFLoader.js]
</body>
</html>
......@@ -93,7 +93,7 @@ var list = {
[ "BufferGeometryLoader", "api/loaders/BufferGeometryLoader" ],
[ "Cache", "api/loaders/Cache" ],
[ "ColladaLoader", "api/loaders/ColladaLoader" ],
[ "glTFLoader", "api/loaders/glTFLoader" ],
[ "GLTFLoader", "api/loaders/GLTFLoader" ],
[ "ImageLoader", "api/loaders/ImageLoader" ],
[ "JSONLoader", "api/loaders/JSONLoader" ],
[ "Loader", "api/loaders/Loader" ],
......
......@@ -2544,8 +2544,8 @@
"!doc": "A low level class for loading resources with XmlHttpRequest, used internaly by most loaders.",
"!type": "fn(manager: +THREE.LoadingManager)"
},
"glTFLoader": {
"!url": "http://threejs.org/docs/#Reference/loaders/glTFLoader",
"GLTFLoader": {
"!url": "http://threejs.org/docs/#Reference/loaders/GLTFLoader",
"prototype": {
"!proto": "THREE.Loader.prototype",
"load": {
......
此差异已折叠。
......@@ -126,11 +126,7 @@
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/gltf/glTF-parser.js"></script>
<script src="js/loaders/gltf/glTFLoader.js"></script>
<script src="js/loaders/gltf/glTFLoaderUtils.js"></script>
<script src="js/loaders/gltf/glTFAnimation.js"></script>
<script src="js/loaders/gltf/glTFShaders.js"></script>
<script src="js/loaders/GLTFLoader.js"></script>
<script>
var orbitControls = null;
......@@ -235,7 +231,8 @@
scene.add(ground);
}
loader = new THREE.glTFLoader;
THREE.GLTFLoader.Shaders.removeAll(); // remove all previous shaders
loader = new THREE.GLTFLoader;
var loadStartTime = Date.now();
var status = document.getElementById("status");
status.innerHTML = "Loading...";
......@@ -356,8 +353,8 @@
function animate() {
requestAnimationFrame( animate );
THREE.glTFAnimator.update();
THREE.glTFShaders.update(scene, camera);
THREE.GLTFLoader.Animations.update();
THREE.GLTFLoader.Shaders.update(scene, camera);
if (cameraIndex == 0)
orbitControls.update();
render();
......@@ -393,8 +390,8 @@
{
name : "Monster", url : "./models/gltf/monster/%s/monster.gltf",
cameraPos: new THREE.Vector3(30, 10, 70),
objectScale: new THREE.Vector3(0.01, 0.01, 0.01),
objectPosition: new THREE.Vector3(2, 6, 0),
objectScale: new THREE.Vector3(0.4, 0.4, 0.4),
objectPosition: new THREE.Vector3(2, 1, 0),
objectRotation: new THREE.Euler(0, - 3 * Math.PI / 4, 0),
animationTime: 3,
addLights:true,
......@@ -423,8 +420,7 @@
addLights:true,
addGround:true,
shadows:true
},
}
];
function buildSceneList() {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册