Przeglądaj źródła

Merge pull request #12266 from cg-cnu/doc-loaders

Refined documentation for loaders
Mr.doob 7 lat temu
rodzic
commit
f2c7935830

+ 18 - 10
docs/examples/loaders/BabylonLoader.html

@@ -8,10 +8,12 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-
 		<h1>[name]</h1>
 
-		<div class="desc">A loader for loading a <em>.babylon</em> resource.</div>
+		<div class="desc">A loader for loading a <em>.babylon</em> resource. <br />
+		The <a href="https://doc.babylonjs.com/generals/file_format_map_(.babylon)"> .babylon </a> file format used by
+		<a href="https://www.babylonjs.com/">Babylon.js</a>.
+		</div>
 
 		<h2>Example</h2>
 
@@ -23,17 +25,23 @@
 		loader.load(
 			// resource URL
 			'models/babylon/skull.babylon',
-			// Function when resource is loaded
+			// called when resource is loaded
 			function ( object ) {
+
 				scene.add( object );
+
 			},
-			// Function called when download progresses
+			// called when loading is in progress
 			function ( xhr ) {
-				console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
+
+				console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
+
 			},
-			// Function called when download errors
+			// called when loading has errors
 			function ( xhr ) {
+
 				console.log( 'An error happened' );
+
 			}
 		);
 		</code>
@@ -57,10 +65,10 @@
 
 		<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 onLoad] — Will be called when load completes. The argument will be the loaded [page:Object3D].<br />
-		[page:function onProgress] — Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
-		[page:function onError] — Will be called when load errors.<br />
+		[page:String url] — A string containing the path/URL of the <em>.babylon</em> file.<br />
+		[page:function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives the loaded [page:Object3D] as an argument.<br />
+		[page:function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which 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 the error as an argument.<br />
 		</div>
 		<div>
 		Begin loading from url and call onLoad with the parsed response content.

+ 37 - 20
docs/examples/loaders/GLTFLoader.html

@@ -11,9 +11,7 @@
 		[page:Loader] &rarr;
 		<h1>[name]</h1>
 
-		<div class="desc">
-		A loader for *glTF* 2.0 resources.
-		<br /><br />
+		<div class="desc"> A loader for loading <em>glTF 2.0</em> resource. <br />
 		<a href="https://www.khronos.org/gltf">glTF</a> (GL Transmission Format) is an
 		<a href="https://github.com/KhronosGroup/glTF/tree/master/specification/2.0">open format specification</a>
 		for efficient delivery and loading of 3D content. Assets may be provided either in JSON (.gltf)
@@ -48,19 +46,38 @@
 		<h2>Example</h2>
 
 		<code>
-		// Instantiate a loader
-		var loader = new THREE.GLTFLoader();
-
-		// Load a glTF resource
-		loader.load( 'models/gltf/duck/duck.gltf', function ( gltf ) {
-			scene.add( gltf.scene );
-
-			gltf.animations; // Array&lt;THREE.AnimationClip&gt;
-			gltf.scene;      // THREE.Scene
-			gltf.scenes;     // Array&lt;THREE.Scene&gt;
-			gltf.cameras;    // Array&lt;THREE.Camera&gt;
-		} );
-		</code>
+			// Instantiate a loader
+			var loader = new THREE.GLTFLoader();
+	
+			// 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&lt;THREE.AnimationClip&gt;
+					gltf.scene; // THREE.Scene
+					gltf.scenes; // Array&lt;THREE.Scene&gt;
+					gltf.cameras; // Array&lt;THREE.Camera&gt;
+	
+				},
+				// called when loading is in progresses
+				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]
 
@@ -81,10 +98,10 @@
 
 		<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 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 />
+		[page:String url] — A string containing the path/URL of the <em>.gltf</em> or <em>.glb</em> file.<br />
+		[page:Function onLoad] — (optional) 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 />
 		</div>
 		<div>
 		Begin loading from url and call the callback function with the parsed response content.

+ 9 - 6
docs/examples/loaders/MTLLoader.html

@@ -11,7 +11,10 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">A loader for loading an <em>.mtl</em> resource, used internaly by [page:OBJMTLLoader] and [page:UTF8Loader].</div>
+		<div class="desc">A loader for loading an <em>.mtl</em> resource, used internaly by [page:OBJMTLLoader] and [page:UTF8Loader].<br />
+		The Material Template Library format (MTL) or .MTL File Format is a companion file format to .OBJ that describes surface shading
+		(material) properties of objects within one or more .OBJ files. 		
+		</div>
 
 		<h2>Constructor</h2>
 
@@ -23,7 +26,7 @@
 			Creates a new [name].
 		</div>
 
-		<!-- <h2>Properties</h2> -->
+		<h2>Properties</h2>
 
 
 		<h2>Methods</h2>
@@ -31,10 +34,10 @@
 
 		<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 onLoad] — Will be called when load completes. The argument will be the loaded [page:MTLLoaderMaterialCreator MTLLoader.MaterialCreator] instance.<br />
-			[page:Function onProgress] — Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
-			[page:Function onError] — Will be called when load errors.<br />
+			[page:String url] — A string containing the path/URL of the <em>.mtl</em> file.<br />
+			[page:Function onLoad] — (optional) A function to be called after the loading is successfully completed. The function receives the loaded [page:MTLLoaderMaterialCreator MTLLoader.MaterialCreator] instance.<br />
+			[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which 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 the error as an argument.<br />
 		</div>
 		<div>
 			Begin loading from url and return the loaded material.

+ 25 - 6
docs/examples/loaders/OBJLoader.html

@@ -11,7 +11,12 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">A loader for loading an <em>.obj</em> resource.</div>
+		<div class="desc">A loader for loading a <em>.obj</em> resource.<br />
+		The <a href="https://en.wikipedia.org/wiki/Wavefront_.obj_file">OBJ file format</a> is a simple data-format 
+		that represents 3D geometry in a human redeable format as, the position of each vertex, the UV position of 
+		each texture coordinate vertex, vertex normals, and the faces that make each polygon defined as a list of 
+		vertices, and texture vertices.
+		</div>
 
 
 		<h2>Example</h2>
@@ -24,9 +29,23 @@
 		loader.load(
 			// resource URL
 			'models/monster.obj',
-			// Function when resource is loaded
+			// called when resource is loaded
 			function ( object ) {
+
 				scene.add( object );
+
+			},
+			// called when loading is in progresses
+			function ( xhr ) {
+
+				console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
+
+			},
+			// called when loading has errors
+			function ( error ) {
+
+				console.log( 'An error happened' );
+
 			}
 		);
 		</code>
@@ -51,10 +70,10 @@
 
 		<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
 		<div>
-		[page:String url] — A string representing the path to the obj file. Required.<br />
-		[page:Function onLoad] — A function to be called when the load completes. The function receives loaded [page:Object3D] as an argument.<br />
-		[page:Function onProgress] — A function to be called while the loading is in progress. The function receives a XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
-		[page:Function onError] — A function to be called if the request fails. The function receives the error.<br />
+		[page:String url] — A string containing the path/URL of the <em>.obj</em> file.<br />
+		[page:Function onLoad] — (optional) A function to be called after the loading is successfully completed. The function receives the loaded [page:Object3D] as an argument.<br />
+		[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The function receives a XMLHttpRequest instance, which 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 />
 		</div>
 		<div>
 		Begin loading from url and call onLoad with the parsed response content.

+ 13 - 8
docs/examples/loaders/OBJLoader2.html

@@ -11,7 +11,12 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">A loader for loading an <em>.obj</em> resource.</div>
+		<div class="desc">A loader for loading a <em>.obj</em> resource. <br />
+		The <a href="https://en.wikipedia.org/wiki/Wavefront_.obj_file">OBJ file format</a> is a simple data-format 
+		that represents 3D geometry in a human redeable format as, the position of each vertex, the UV position of 
+		each texture coordinate vertex, vertex normals, and the faces that make each polygon defined as a list of 
+		vertices, and texture vertices.
+		</div>
 
 		<h2>Examples</h2>
 
@@ -67,15 +72,15 @@
 
 		<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError], [page:Function onMeshAlter], [page:boolean useAsync] )</h3>
 		<div>
-			[page:String url] - URL of the file to load<br>
-			[page:Function onLoad] - Called after loading was successfully completed<br>
-			[page:Function onProgress] - Called to report progress of loading. The argument will be the XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br>
-			[page:Function onError] - Called after an error occurred during loading.<br>
-			[page:Function onMeshAlter] - Called after a new mesh raw data becomes available to allow alteration<br>
-			[page:boolean useAsync] - If true uses async loading with worker, if false loads data synchronously
+			[page:String url] - A string containing the path/URL of the <em>.obj</em> file.<br>
+			[page:Function onLoad] - (optional) A function to be called after loading is successfully completed. The function receives loaded [page:Object3D] as an argument.<br>
+			[page:Function onProgress] - (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which contains [page:Integer total] and [page:Integer loaded] bytes.<br>
+			[page:Function onError] - (optional) A function to be called if an error occurrs during loading. The function receives the error as an argument.<br>
+			[page:Function onMeshAlter] - (optional) A function to be called after a new mesh raw data becomes available for alteration.<br>
+			[page:boolean useAsync] - (optional) If true, uses async loading with worker, if false loads data synchronously.
 		</div>
 		<div>
-			Use this convenient method to load an OBJ file at the given URL. Per default the fileLoader uses an arraybuffer.
+			Use this convenient method to load an OBJ file at the given URL. By default the fileLoader uses an arraybuffer.
 		</div>
 
 

+ 24 - 8
docs/examples/loaders/PCDLoader.html

@@ -11,8 +11,10 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">A loader for <em>PCD</em> files. Loads ascii and binary.
-			Compressed binary files are not supported.</div>
+		<div class="desc">A loader for loading a <em>.pcd</em> resource. <br />
+		Point Cloud Data is a file format for <a href="https://en.wikipedia.org/wiki/Point_Cloud_Library">Point Cloud Library</a>. <br />
+		Loader support ascii and binary. Compressed binary files are not supported.
+		</div>
 
 		<h2>Example</h2>
 
@@ -24,10 +26,24 @@
 		// load a resource
 		loader.load(
 			// resource URL
-			'pointcloud.pcd' ,
-			// Function when resource is loaded
+			'pointcloud.pcd',
+			// called when the resource is loaded
 			function ( mesh ) {
+
 				scene.add( mesh );
+
+			},
+			// called when loading is in progresses
+			function ( xhr ) {
+
+				console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
+
+			},
+			// called when loading has errors
+			function ( error ) {
+
+				console.log( 'An error happened' );
+
 			}
 		);
 		</code>
@@ -56,10 +72,10 @@
 
 		<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 onLoad] — Will be called when load completes. The argument will be the loaded [page:Object3D].<br />
-		[page:Function onProgress] — Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
-		[page:Function onError] — Will be called when load errors.<br />
+		[page:String url] — A string containing the path/URL of the <em>.pcd</em> file.<br />
+		[page:Function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives loaded [page:Object3D] as an argument.<br />
+		[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which 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 the error as an argument.<br />
 		</div>
 		<div>
 		Begin loading from url and call onLoad with the parsed response content.

+ 16 - 13
docs/examples/loaders/PDBLoader.html

@@ -11,10 +11,8 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">
-		A loader for loading a <em>.pdb</em> resource.
-		<br /><br />
-		The <a href="http://en.wikipedia.org/wiki/Protein_Data_Bank_(file_format)">Protein Data Bank file format</a> is a textual file format describing the three-dimensional structures of molecules.
+		<div class="desc">A loader for loading a <em>.pdb</em> resource.<br>
+		The <a href="http://en.wikipedia.org/wiki/Protein_Data_Bank_(file_format)">Protein Data Bank</a> file format is a textual file describing the three-dimensional structures of molecules.
 		</div>
 
 		<h2>Example</h2>
@@ -27,7 +25,7 @@
 		loader.load(
 			// resource URL
 			'models/molecules/caffeine.pdb',
-			// Function when resource is loaded
+			// called when the resource is loaded
 			function ( pdb ) {
 
 				var geometryAtoms = pdb.geometryAtoms;
@@ -35,14 +33,19 @@
 				var json = pdb.json;
 
 				console.log( 'This molecule has ' + json.atoms.length + ' atoms' );
+
 			},
-			// Function called when download progresses
+			// called when loading is in progresses
 			function ( xhr ) {
-				console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
+
+				console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
+
 			},
-			// Function called when download errors
-			function ( xhr ) {
+			// called when loading has errors
+			function ( error ) {
+
 				console.log( 'An error happened' );
+
 			}
 		);
 		</code>
@@ -67,10 +70,10 @@
 
 		<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
 		<div>
-		[page:String url] — required. URL to the <em>.pdb</em> file<br />
-		[page:Function onLoad] — Will be called when load completes. The arguments will be an [page:BufferGeometry geometryAtoms], [page:BufferGeometry geometryBonds] and the [page:Object JSON] structure.<br />
-		[page:Function onProgress] — Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
-		[page:Function onError] — Will be called when load errors.<br />
+		[page:String url] — A string containing the path/URL of the <em>.pdb</em> file.<br />
+		[page:Function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives the object having the following properties. [page:BufferGeometry geometryAtoms], [page:BufferGeometry geometryBonds] and the [page:Object JSON] structure.<br />
+		[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which 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 the error as an argument.<br />
 		</div>
 		<div>
 		Begin loading from url and call onLoad with the parsed response content.

+ 43 - 5
docs/examples/loaders/SVGLoader.html

@@ -11,9 +11,47 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">A loader for loading an <em>.svg</em> resource.</div>
+		<div class="desc">A loader for loading a <em>.svg</em> resource.<br >
+		<a href="https://en.wikipedia.org/wiki/Scalable_Vector_Graphics">Scalabe Vector Graphics</a> is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.			
+		</div>
+
+		<h2>Example</h2>
+		
+		<code>
+		// instantiate a loader
+		var loader = new THREE.PDBLoader();
+
+		// load a PDB resource
+		loader.load(
+			// resource URL
+			'models/molecules/caffeine.pdb',
+			// called when the resource is loaded
+			function ( pdb ) {
+
+				var geometryAtoms = pdb.geometryAtoms;
+				var geometryBonds = pdb.geometryBonds;
+				var json = pdb.json;
+
+				console.log( 'This molecule has ' + json.atoms.length + ' atoms' );
+
+			},
+			// called when loading is in progresses
+			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_svg]
+		
 		<h2>Constructor</h2>
 
 		<h3>[name]( [page:LoadingManager manager] )</h3>
@@ -31,10 +69,10 @@
 
 		<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 onLoad] — Will be called when load completes. The argument will be the loaded [page:SVGDocument].<br />
-		[page:Function onProgress] — Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
-		[page:Function onError] — Will be called when load errors.<br />
+		[page:String url] — A string containing the path/URL of the <em>.svg</em> file.<br />
+		[page:Function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives the loaded [page:SVGDocument] as an argument.<br />
+		[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which 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 the error as an argument.<br />
 		</div>
 		<div>
 		Begin loading from url and call onLoad with the response content.

+ 19 - 12
docs/examples/loaders/TGALoader.html

@@ -10,8 +10,9 @@
 	<body>
 		<h1>[name]</h1>
 
-		<div class="desc">Class for loading a <em>.tga</em> [page:DataTexture texture].</div>
-
+		<div class="desc">A loader for loading a <em>.tga</em> resource. <br />
+		<a href="https://en.wikipedia.org/wiki/Truevision_TGA">TGA</a> is a raster graphics, image file format.
+		</div>
 
 		<h2>Example</h2>
 
@@ -23,20 +24,26 @@
 		var texture = loader.load(
 			// resource URL
 			'textures/crate_grey8.tga'
-			// Function when resource is loaded
+			// called when loading is completed
 			function ( texture ) {
+
 				console.log( 'Texture is loaded' );
+
 			},
-			// Function called when download progresses
+			// called when the loading is in progresses
 			function ( xhr ) {
-				console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
+
+				console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
+
 			},
-			// Function called when download errors
-			function ( xhr ) {
+			// called when the loading failes
+			function ( error ) {
+
 				console.log( 'An error happened' );
+
 			}
 		);
-
+		
 		var material = new THREE.MeshPhongMaterial( {
 			color: 0xffffff,
 			map: texture
@@ -60,10 +67,10 @@
 
 		<h3>[method:DataTexture load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
 		<div>
-		[page:String url] — required<br />
-		[page:Function onLoad] — Will be called when load completes. The argument will be the loaded [page:DataTexture].<br />
-		[page:Function onProgress] — Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
-		[page:Function onError] — Will be called when load errors.<br />
+		[page:String url] — A string containing the path/URL of the <em>.tga</em> file. <br />
+		[page:Function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives loaded [page:DataTexture] as an argument.<br />
+		[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which 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 the error as an argument.<br />
 		</div>
 		<div>
 		Begin loading from url and pass the loaded [page:DataTexture texture] to onLoad. The [page:DataTexture texture] is also directly returned for immediate use (but may not be fully loaded).