提交 d23db267 编写于 作者: M Mr.doob

Merge pull request #5485 from vincent/doc.loaders

Loaders documentation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="../../list.js"></script>
<script src="../../page.js"></script>
<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>
<h2>Constructor</h2>
<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>
<h2>Properties</h2>
<h2>Methods</h2>
<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, that contain .[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 onLoad with the parsed response content.
</div>
<h3>[method:Object3D parse]( [page:Object json] )</h3>
<div>
[page:Object json] — The <em>JSON</em> structure to parse.
</div>
<div>
Parse a <em>JSON</em> structure and return an [page:Object3D object] or a [page:Scene scene].<br />
Found objects are converted to [page:Mesh] with a [page:BufferGeometry] and a default [page:MeshPhongMaterial].<br />
Lights are parsed accordingly.
</div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.BabylonLoader();
// load a Babylon resource
loader.load(
// resource URL
'models/babylon/skull.babylon',
// Function when resource is loaded
function ( object ) {
scene.add( object );
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
</code>
[example:webgl_loader_babylon]
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/BabylonLoader.js examples/js/loaders/BabylonLoader.js]
</body>
</html>
...@@ -9,36 +9,72 @@ ...@@ -9,36 +9,72 @@
<body> <body>
<h1>[name]</h1> <h1>[name]</h1>
<div class="desc">todo</div> <div class="desc">A loader for loading a [page:BufferGeometry].</div>
<h2>Example</h2>
<code>todo</code>
<h2>Constructor</h2> <h2>Constructor</h2>
<h3>[name]( [page:LoadingManager manager] )</h3>
<h3>todo</h3> <div>
<div></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>
<h2>Properties</h2> <h2>Properties</h2>
<h3>todo</h3>
<div>
todo
</div>
<h2>Methods</h2> <h2>Methods</h2>
<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:BufferGeometry].<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[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 onLoad with the parsed response content.
</div>
<h3>todo</h3> <h3>[method:BufferGeometry parse]( [page:Object json] )</h3>
<div>todo</div> <div>
[page:Object json] — The <em>JSON</em> structure to parse.
</div>
<div> <div>
todo Parse a <em>JSON</em> structure and return a [page:BufferGeometry].
</div> </div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.BufferGeometryLoader();
// load a resource
loader.load(
// resource URL
'models/json/pressure.json',
// Function when resource is loaded
function ( geometry ) {
var material = new THREE.MeshLambertMaterial( { color: 0xF5F5F5 } );
var object = new THREE.Mesh( geometry, material );
scene.add( object );
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
</code>
<h2>Source</h2> <h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
...@@ -9,36 +9,58 @@ ...@@ -9,36 +9,58 @@
<body> <body>
<h1>[name]</h1> <h1>[name]</h1>
<div class="desc">todo</div> <div class="desc">A simple caching classe, used internaly by [page:XHRLoader].</div>
<h2>Example</h2>
<code>todo</code>
<h2>Constructor</h2> <h2>Constructor</h2>
<h3>[name]()</h3>
<h3>todo</h3> <div>
<div></div> Creates a new [name].
</div>
<h2>Properties</h2> <h2>Properties</h2>
<h3>todo</h3> <h3>[property:Object files]</h3>
<div> <div>
todo An [page:Object object] that hold cached values.
</div> </div>
<h2>Methods</h2> <h2>Methods</h2>
<h3>[method:null add]( [page:String key], value )</h3>
<div>
[page:String key] — required. A string key <br />
[page:Object] value — <br />
</div>
<div>
Adds a cache entry with that key to hold the value. If this key already holds a value, it is overwritten.
</div>
<h3>todo</h3> <h3>[method:null get]( [page:String key] )</h3>
<div>todo</div> <div>
[page:String key] — required. A string key <br />
</div>
<div> <div>
todo Get the value of key. If the key does not exist the null value is returned.
</div> </div>
<h3>[method:null remove]( [page:String key] )</h3>
<div>
[page:String key] — required. A string key <br />
</div>
<div>
Remove the cached value associated with the key.
</div>
<h3>[method:null clear]()</h3>
<div>
Remove all values from the cache.
</div>
<h2>Source</h2> <h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="../../list.js"></script>
<script src="../../page.js"></script>
<link type="text/css" rel="stylesheet" href="../../page.css" />
</head>
<body>
<h1>[name]</h1>
<div class="desc">A loader for loading an <em>.babylon</em> resource.</div>
<h2>Constructor</h2>
<h3>[name]()</h3>
<div>
Creates a new [name].
</div>
<h2>Properties</h2>
<h3>[property:Array options]</h3>
<div>
&nbsp;.[page:Boolean centerGeometry] — Force [page:Geometry] to always be centered at the local origin of the containing [page: Mesh].<br />
&nbsp;.[page:Boolean convertUpAxis] — Axis conversion is done for geometries, animations, and controllers.<br />
&nbsp;.[page:Boolean subdivideFaces] — Force subdivision into multiple [page: Face3].<br />
&nbsp;.[page:String upAxis] — X, Y or Z<br />
&nbsp;.[page:Boolean defaultEnvMap] — Cubemap to use for reflective or refractive materials.<br />
</div>
<h3>[property:Object geometries]</h3>
<div>
Parsed <em>.dae</em> geometries.
</div>
<h2>Methods</h2>
<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress] )</h3>
<div>
[page:String url] — required<br />
[page:function onLoad] — Will be called when load completes. The argument will be an [page:Object object] containing loaded resources.<br />
[page:function onProgress] — Will be called while load progresses. The argument will be an object containing .[page:Integer total] and .[page:Integer loaded] bytes.<br />
</div>
<div>
Begin loading from url and call onLoad with the parsed response content.
</div>
<h3>[method:Object parse]( [page:Document doc], [page:Function callBack], [page:String url] )</h3>
<div>
[page:Document doc] — The <em>XML</em> document to parse.<br />
[page:Function callBack] — Will be called when parse completes.<br />
[page:String url] — The base url from which to find subsequent resources.<br />
</div>
<div>
Parse an <em>XML Document</em> and return an [page:Object object] that contain loaded parts: .[page:Scene scene], .[page:Array morphs], .[page:Array skins], .[page:Array animations], .[page:Object dae]
</div>
<h3>[method:null setPreferredShading]( [page:Integer shading] )</h3>
<div>
[page:Integer shading] — required
</div>
<div>
Set the .[page:Integer shading] property on the resource's materials.<br />
Options are [page:Materials THREE.SmoothShading], [page:Materials THREE.FlatShading], [page:Materials THREE.NoShading].
</div>
<h3>[method:null applySkin]( [page:Geometry geometry], [page:Object instanceCtrl], [page:Integer frame] )</h3>
<div>
[page:Geometry geometry] — required<br />
[page:Object instanceCtrl] — required. A collada <em>skinController</em><br />
[page:Integer frame] — optionnal. Default is 40<br />
</div>
<div>
Apply a skin (vertices, animation, bones) from a <em>collada skin controller</em>, on the given [page:Geometry].
</div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.ColladaLoader();
// load a Babylon resource
loader.load(
// resource URL
'models/collada/monster/monster.dae',
// Function when resource is loaded
function ( collada ) {
scene.add( collada.scene );
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
}
);
</code>
[example:webgl_loader_collada]<br />
[example:webgl_loader_collada_keyframe]<br />
[example:webgl_loader_collada_skinning]<br />
[example:webgl_loader_collada_kinematics]
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/OBJLoader.js examples/js/loaders/BabylonLoader.js]
</body>
</html>
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
<body> <body>
<h1>[name]</h1> <h1>[name]</h1>
<div class="desc">A loader for loading an [page:Image image].</div> <div class="desc">A loader for loading an [page:Image].</div>
<h2>Constructor</h2>
<h2>Constructor</h2>
<h3>[name]([page:LoadingManager manager])</h3> <h3>[name]( [page:LoadingManager manager] )</h3>
<div> <div>
manager -- The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager]. [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
</div> </div>
<div> <div>
Creates a new [name]. Creates a new [name].
...@@ -24,32 +24,65 @@ ...@@ -24,32 +24,65 @@
<h2>Properties</h2> <h2>Properties</h2>
<h3>[property:string crossOrigin]</h3> <h3>[property:String crossOrigin]</h3>
<div> <div>
The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS. The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
</div> </div>
<h2>Methods</h2> <h2>Methods</h2>
<h3>[method:Image load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3> <h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div> <div>
onLoad -- Will be called when load completes. The argument will be the loaded Imageloader. [page:String url] — required<br />
onProgress -- Will be called while load progresses. The argument will be the progress event. [page:Function onLoad] — Will be called when load completes. The argument will be the loaded Imageloader.<br />
onError -- Will be called when load errors. [page:Function onProgress] — Will be called while load progresses. The argument will be the progress event.<br />
url — required [page:Function onError] — Will be called when load errors.<br />
</div> </div>
<div> <div>
Begin loading from url and return the [page:Image image] object that will contain the data. Begin loading from url and return the [page:Image image] object that will contain the data.
</div> </div>
<h3>[method:todo setCrossOrigin]([page:String value])</h3> <h3>[method:null setCrossOrigin]( [page:String value] )</h3>
<div> <div>
value -- The crossOrigin string. [page:String value] — The crossOrigin string.
</div> </div>
<div> <div>
The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS. The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
</div> </div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.ImageLoader();
// load a image resource
loader.load(
// resource URL
'textures/skyboxsun25degtest.png',
// Function when resource is loaded
function ( image ) {
// do something with it
// like drawing a part of it on a canvas
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( '2d' );
context.drawImage( image, 100, 100 );
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
</code>
[example:webgl_shaders_ocean]
<h2>Source</h2> <h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
...@@ -15,54 +15,148 @@ ...@@ -15,54 +15,148 @@
<h2>Constructor</h2> <h2>Constructor</h2>
<h3>[name]( [page:Boolean showStatus] )</h3>
<h3>[name]([page:Boolean showStatus])</h3>
<div> <div>
showStatus -- todo [page:Boolean showStatus] — Show the status of loading div.
</div> </div>
<div> <div>
todo Creates a new [name].
</div> </div>
<h2>Properties</h2>
<h2>Properties</h2>
<h3>[property:boolean withCredentials]</h3> <h3>[property:boolean withCredentials]</h3>
<div> <div>
todo If true, the ajax request will use cookies.
</div> </div>
<h2>Properties inherited from [page:Loader]</h2>
<h3>[property:Boolean showStatus]</h3>
<div>If true, show loading status in the statusDomElement.</div>
<h3>[property:DOMElement statusDomElement]</h3>
<div>This is the recipient of status messages.</div>
<h3>[property:Function onLoadStart]</h3>
<div>Will be called when load starts.</div>
<div>The default is a function with empty body.</div>
<!--
<h3>[property:Function onLoadProgress]</h3>
<div>Will be called while load progresses.</div>
<div>The default is a function with empty body.</div>
-->
<h3>[property:Function onLoadComplete]</h3>
<div>Will be called when load completes.</div>
<div>The default is a function with empty body.</div>
<h2>Methods</h2> <h2>Methods</h2>
<h3>[method:todo load]( [page:String url], [page:Function callback], [page:String texturePath] )</h3> <h3>[method:null load]( [page:String url], [page:Function callback], [page:String texturePath] )</h3>
<div> <div>
url — required<br /> [page:String url] — required<br />
callback — required. This function will be called with the loaded model as an instance of [page:Geometry geometry] when the load is completed.<br /> [page:Function callback] — required. Will be called when load completes. The arguments will be the loaded [page:Object3D] and the loaded [page:Array materials].<br />
texturePath — optional. If not specified, textures will be assumed to be in the same folder as the Javascript model file. [page:String texturePath] — optional. If not specified, textures will be assumed to be in the same folder as the Javascript model file.
</div> </div>
<h3>[method:null loadAjaxJSON]([page:JSONLoader context], [page:String url], [page:Function callback], [page:String texturePath], [page:Function callbackProgress])</h3>
<div>
[page:JSONLoader context] — The [page:JSONLoader] instance<br />
[page:String url] — required<br />
[page:Function callback] — required. This function will be called with the loaded model as an instance of [page:Geometry geometry] when the load is completed.<br />
[page:String texturePath] — Base path for textures.<br />
[page:Function callbackProgress] — Will be called while load progresses. The argument will be an [page:Object] containing two attributes: .[page:Integer total] and .[page:Integer loaded] bytes.
</div>
<div>
Begin loading from url and call <em>callback</em> with the parsed response content.
</div>
<h3>[method:todo parse]([page:todo json], [page:todo texturePath])</h3> <h3>[method:Object3D parse]( [page:Object json], [page:String texturePath] )</h3>
<div> <div>
json -- todo <br /> [page:String json] — JSON object to parse.<br />
texturePath -- todo [page:String texturePath] — Base path for textures.
</div> </div>
<div> <div>
todo Parse a <em>JSON</em> structure and return an [page:Object] containing the parsed .[page:Geometry] and .[page:Array materials].
</div> </div>
<h3>[method:todo loadAjaxJSON]([page:todo context], [page:todo url], [page:todo callback], [page:todo texturePath], [page:todo callbackProgress])</h3> <h2>Methods inherited from [page:Loader]</h2>
<h3>[method:Boolean needsTangents]( [page:Array materials] )</h3>
<div> <div>
context -- todo <br /> [page:Array materials] — an array of [page:Material]
url -- todo <br />
callback -- todo <br />
texturePath -- todo <br />
callbackProgress -- todo
</div> </div>
<div> <div>
todo Checks if the loaded object needs tangents based on its materials.
</div> </div>
<h3>[method:null updateProgress]( [page:object progress] )</h3>
<div>
[page:Object progress] — an object containing loaded(contains the amount of bytes loaded) and optionally total (containing the total amount of bytes).
</div>
<div>
Updates the DOM object with the progress made.
</div>
<h3>[method:Material createMaterial]( [page:object m], [page:string texturePath] )</h3>
<div>
[page:Object m] — The parameters to create the material. <br />
[page:String texturePath] — The base path of the textures.
</div>
<div>
Creates the Material based on the parameters m.
</div>
<h3>[method:Array initMaterials]( [page:Array materials], [page:string texturePath] )</h3>
<div>
[page:Array materials] — an array of parameters to create materials. <br />
[page:String texturePath] — The base path of the textures.
</div>
<div>
Creates an array of [page:Material] based on the array of parameters m. The index of the parameters decide the correct index of the materials.
</div>
<h3>[method:String extractUrlBase]( [page:string url] )</h3>
<div>
[page:String url] — The url to extract the base url from.
</div>
<div>
Extract the base from the URL.
</div>
<h3>[method:DOMElement addStatusElement]()</h3>
<div>
Add a DOM element to indicate the progress and return the DOMElement
</div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource URL
'models/animated/monster/monster.js',
// Function when resource is loaded
function ( geometry, materials ) {
var material = new THREE.MeshFaceMaterial( materials );
var object = new THREE.Mesh( geometry, material );
scene.add( object );
}
);
</code>
[example:webgl_loader_json_blender]
<h2>Source</h2> <h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
...@@ -15,9 +15,9 @@ ...@@ -15,9 +15,9 @@
<h2>Constructor</h2> <h2>Constructor</h2>
<h3>[name]([page:Boolean showStatus])</h3> <h3>[name]( [page:Boolean showStatus] )</h3>
<div> <div>
showStatus -- Show the status of loading div. [page:Boolean showStatus] — Show the status of loading div.
</div> </div>
<div> <div>
Creates a new [name]. This should be called as base class. Creates a new [name]. This should be called as base class.
...@@ -51,43 +51,43 @@ ...@@ -51,43 +51,43 @@
<h2>Methods</h2> <h2>Methods</h2>
<h3>[method:Boolean needsTangents]([page:Array materials])</h3> <h3>[method:Boolean needsTangents]( [page:Array materials] )</h3>
<div> <div>
materials -- an array of [page:Material] [page:Array materials] — an array of [page:Material]
</div> </div>
<div> <div>
Checks if the loaded object needs tangents based on its materials. Checks if the loaded object needs tangents based on its materials.
</div> </div>
<h3>[method:todo updateProgress]([page:object progress])</h3> <h3>[method:null updateProgress]( [page:object progress] )</h3>
<div> <div>
progress -- an object containing loaded(contains the amount of bytes loaded) and optionally total (containing the total amount of bytes). [page:Object progress] — an object containing loaded(contains the amount of bytes loaded) and optionally total (containing the total amount of bytes).
</div> </div>
<div> <div>
Updates the DOM object with the progress made. Updates the DOM object with the progress made.
</div> </div>
<h3>[method:Material createMaterial]([page:object m], [page:string texturePath])</h3> <h3>[method:Material createMaterial]( [page:object m], [page:string texturePath] )</h3>
<div> <div>
m -- The parameters to create the material. <br /> [page:Object m] — The parameters to create the material. <br />
texturePath -- The base path of the textures. [page:String texturePath] — The base path of the textures.
</div> </div>
<div> <div>
Creates the Material based on the parameters m. Creates the Material based on the parameters m.
</div> </div>
<h3>[method:Array initMaterials]([page:Array materials], [page:string texturePath])</h3> <h3>[method:Array initMaterials]( [page:Array materials], [page:string texturePath] )</h3>
<div> <div>
materials -- an array of parameters to create materials. <br /> [page:Array materials] — an array of parameters to create materials. <br />
texturePath -- The base path of the textures. [page:String texturePath] — The base path of the textures.
</div> </div>
<div> <div>
Creates an array of [page:Material] based on the array of parameters m. The index of the parameters decide the correct index of the materials. Creates an array of [page:Material] based on the array of parameters m. The index of the parameters decide the correct index of the materials.
</div> </div>
<h3>[method:todo extractUrlBase]([page:string url])</h3> <h3>[method:String extractUrlBase]( [page:string url] )</h3>
<div> <div>
url -- The url to extract the base url from. [page:String url] — The url to extract the base url from.
</div> </div>
<div> <div>
Extract the base from the URL. Extract the base from the URL.
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
<h3>[method:DOMElement addStatusElement]()</h3> <h3>[method:DOMElement addStatusElement]()</h3>
<div> <div>
Add a DOM element to indicate the progress and returns the DOMElement Add a DOM element to indicate the progress and return the DOMElement
</div> </div>
......
...@@ -11,28 +11,29 @@ ...@@ -11,28 +11,29 @@
<div class="desc">Handles and keeps track of loaded and pending data.</div> <div class="desc">Handles and keeps track of loaded and pending data.</div>
<code> <code>
var manager = new THREE.LoadingManager(); var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) { manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total ); console.log( item, loaded, total );
}; };
var loader = new THREE.OBJLoader( manager ); var loader = new THREE.OBJLoader( manager );
loader.load( 'file.obj', function ( object ) { loader.load( 'file.obj', function ( object ) {
// //
} ); } );
</code> </code>
<h2>Constructor</h2> <h2>Constructor</h2>
<h3>[name]([page:function onLoad], [page:function onProgress], [page:function onError])</h3> <h3>[name]( [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div> <div>
[page:function onLoad] -- The function that needs to be called when all loaders are done. [page:Function onLoad] — The function that needs to be called when all loaders are done.<br />
[page:function onProgress] -- The function that needs to be called when an item is complete. [page:Function onProgress] — The function that needs to be called when an item is complete.<br />
[page:function onError] -- The function that needs to be called when an item is errors. [page:Function onError] — The function that needs to be called when an item is errors.
</div> </div>
<div> <div>
Creates a [name]. Creates a [name].
...@@ -41,18 +42,18 @@ loader.load( 'file.obj', function ( object ) { ...@@ -41,18 +42,18 @@ loader.load( 'file.obj', function ( object ) {
<h2>Properties</h2> <h2>Properties</h2>
<h3>[property:function onLoad]</h3> <h3>[property:Function onLoad]</h3>
<div> <div>
The function that needs to be called when all loaders are done. The function that needs to be called when all loaders are done.
</div> </div>
<h3>[property:function onProgress]</h3> <h3>[property:Function onProgress]</h3>
<div> <div>
The function that needs to be called when an item is complete. The arguments are url(The url of the item just loaded),<br /> The function that needs to be called when an item is complete. The arguments are url(The url of the item just loaded),<br />
loaded(the amount of items already loaded), total( The total amount of items to be loaded.) loaded(the amount of items already loaded), total( The total amount of items to be loaded.)
</div> </div>
<h3>[property:function onError]</h3> <h3>[property:Function onError]</h3>
<div> <div>
The function that needs to be called when an item errors. The function that needs to be called when an item errors.
</div> </div>
...@@ -60,22 +61,28 @@ loader.load( 'file.obj', function ( object ) { ...@@ -60,22 +61,28 @@ loader.load( 'file.obj', function ( object ) {
<h2>Methods</h2> <h2>Methods</h2>
<h3>[method:todo itemStart]( [page:String url] )</h3> <h3>[method:null itemStart]( [page:String url] )</h3>
<div> <div>
url — the url to load [page:String url] — the url to load
</div> </div>
<div> <div>
This should be called by any loader used by the manager when the loader starts loading an url. These shouldn't be called outside a loader. This should be called by any loader used by the manager when the loader starts loading an url. These shouldn't be called outside a loader.
</div> </div>
<h3>[method:todo itemEnd]( [page:String url] )</h3> <h3>[method:null itemEnd]( [page:String url] )</h3>
<div> <div>
url — the url to load [page:String url] — the loaded url
</div> </div>
<div> <div>
This should be called by any loader used by the manager when the loader ended loading an url. These shouldn't be called outside a loader. This should be called by any loader used by the manager when the loader ended loading an url. These shouldn't be called outside a loader.
</div> </div>
<h2>Example</h2>
[example:webgl_loader_obj]
<h2>Source</h2> <h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
<!D]OCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="../../list.js"></script>
<script src="../../page.js"></script>
<link type="text/css" rel="stylesheet" href="../../page.css" />
</head>
<body>
<h1>[name]</h1>
<div class="desc">A loader for loading an <em>.mtl</em> resource, used internaly by [page:OBJMTLLoader] and [page:UTF8Loader].</div>
<h2>Constructor</h2>
<h3>[name]( [page:String baseUrl], [page:Object options], [page:String crossOrigin] )</h3>
<div>
[page:String baseUrl] — The base url from which to find subsequent resources.<br />
[page:Object options] — Options passed to the created material (side, wrap, normalizeRGB, ignoreZeroRGBs, invertTransparency).<br />
[page:String crossOrigin] — The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.<br />
</div>
<div>
Creates a new [name].
</div>
<h2>Properties</h2>
<h2>Methods</h2>
<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, that contain .[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 return the loaded material.
</div>
<h3>[method:MTLLoaderMaterialCreator parse]( [page:String text] )</h3>
<div>
[page:String text] — The textual <em>mtl</em> structure to parse.
</div>
<div>
Parse a <em>mtl</em> text structure and return a [page:MTLLoaderMaterialCreator] instance.<br />
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/[name].js examples/js/loaders/[name].js]
</body>
</html>
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
<body> <body>
<h1>[name]</h1> <h1>[name]</h1>
<div class="desc">A loader for loading an [page:Material material].</div> <div class="desc">A loader for loading a [page:Material] in JSON format.</div>
<h2>Constructor</h2>
<h2>Constructor</h2>
<h3>[name]([page:LoadingManager manager])</h3> <h3>[name]( [page:LoadingManager manager] )</h3>
<div> <div>
manager -- The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager]. [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
</div> </div>
<div> <div>
Creates a new [name]. Creates a new [name].
...@@ -25,33 +25,61 @@ ...@@ -25,33 +25,61 @@
<h2>Methods</h2> <h2>Methods</h2>
<h3>[method:Image load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3> <h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div> <div>
onLoad -- Will be called when load completes. The argument will be the loaded Imageloader. [page:String url] — required<br />
onProgress -- Will be called while load progresses. The argument will be the progress event. [page:Function onLoad] — Will be called when load completes. The argument will be the loaded [page:Material].<br />
onError -- Will be called when load errors. [page:Function onProgress] — Will be called while load progresses. The argument will be the progress event.<br />
url — required [page:Function onError] — Will be called when load errors.<br />
</div> </div>
<div> <div>
Begin loading from url and return the [page:Material material] object that will contain the data. Begin loading from url and return the [page:Material] object that will contain the data.
</div> </div>
<h3>[method:todo setCrossOrigin]([page:String value])</h3> <h3>[method:null setCrossOrigin]( [page:String value] )</h3>
<div> <div>
value -- The crossOrigin string. [page:String value] — The crossOrigin string.
</div> </div>
<div> <div>
The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS. The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
</div> </div>
<h3>[method:todo parse]([page:Object json])</h3> <h3>[method:Material parse]( [page:Object json] )</h3>
<div> <div>
json -- The json object containing the parameters of the Material. [page:Object json] — The json object containing the parameters of the Material.
</div> </div>
<div> <div>
Creates a new [page:Material material] of the type 'json.type' and with parameters defined in the json object. Parse a <em>JSON</em> structure and create a new [page:Material] of the type [page:String json.type] with parameters defined in the json object.
</div> </div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.MaterialLoader();
// load a resource
loader.load(
// resource URL
'path/to/material.json',
// Function when resource is loaded
function ( material ) {
object.material = material;
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
</code>
<h2>Source</h2> <h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="../../list.js"></script>
<script src="../../page.js"></script>
<link type="text/css" rel="stylesheet" href="../../page.css" />
</head>
<body>
<h1>[name]</h1>
<div class="desc">A loader for loading an <em>.obj</em> resource.</div>
<h2>Constructor</h2>
<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>
<h2>Properties</h2>
<h2>Methods</h2>
<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, that contain .[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 onLoad with the parsed response content.
</div>
<h3>[method:Object3D parse]( [page:String text] )</h3>
<div>
[page:String text] — The textual <em>obj</em> structure to parse.
</div>
<div>
Parse an <em>obj</em> text structure and return an [page:Object3D].<br />
Found objects are converted to [page:Mesh] with a [page:BufferGeometry] and a default [page:MeshLambertMaterial].
</div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.OBJLoader();
// load a resource
loader.load(
// resource URL
'models/skinned/UCS_config.json',
// Function when resource is loaded
function ( object ) {
scene.add( object );
}
);
</code>
[example:webgl_loader_obj]
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/OBJLoader.js examples/js/loaders/OBJLoader.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="../../list.js"></script>
<script src="../../page.js"></script>
<link type="text/css" rel="stylesheet" href="../../page.css" />
</head>
<body>
<h1>[name]</h1>
<div class="desc">A loader for loading a <em>.obj</em> and its <em>.mtl</em> together.</div>
<h2>Constructor</h2>
<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>
<h2>Properties</h2>
<h2>Methods</h2>
<h3>[method:null load]( [page:String objUrl], [page:String mtlUrl], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div>
[page:String objUrl] — required. URL to the <em>.obj</em> resource<br />
[page:String mtlUrl] — required. URL to the <em>.mtl</em> resource<br />
[page:Function onLoad] — Will be called when both resources load complete. The argument will be the loaded [page:Object3D].<br />
[page:Function onProgress] — Will be called while both load progress. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
</div>
<div>
Begin loading from urls and call onLoad with the parsed response content.
</div>
<h3>[method:Object3D parse]( [page:String text], [page:Function mtllibCallback] )</h3>
<div>
[page:String text] — required. The textual <em>obj</em> structure to parse.<br/>
[page:Function mtllibCallback] — optional. Callback to handle <em>mtllib</em> declaration.<br/>
</div>
<div>
Parse an <em>obj</em> text structure and return an [page:Object3D].<br />
Found objects are converted to [page:Mesh] with a [page:BufferGeometry] and materials are converted to [page:MeshLambertMaterial].
</div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.OBJMTLLoader();
// load an obj / mtl resource pair
loader.load(
// OBJ resource URL
'obj/male02/male02.obj',
// MTL resource URL
'obj/male02/male02_dds.mtl',
// Function when both resources are loaded
function ( object ) {
scene.add( object );
},
// Function called when downloads progress
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when downloads error
function ( xhr ) {
console.log( 'An error happened' );
}
);
</code>
[example:webgl_loader_obj_mtl]
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/OBJMTLLoader.js examples/js/loaders/OBJMTLLoader.js]
</body>
</html>
...@@ -9,36 +9,66 @@ ...@@ -9,36 +9,66 @@
<body> <body>
<h1>[name]</h1> <h1>[name]</h1>
<div class="desc">todo</div> <div class="desc">A loader for loading a JSON resource. Unlike the [page:JSONLoader], this one make use of the <em>.type</em> attributes of objects to map them to their original classes.</div>
<h2>Example</h2>
<code>todo</code>
<h2>Constructor</h2> <h2>Constructor</h2>
<h3>[name]( [page:LoadingManager manager] )</h3>
<h3>todo</h3> <div>
<div></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>
<h2>Properties</h2> <h2>Properties</h2>
<h3>todo</h3>
<h2>Methods</h2>
<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div> <div>
todo [page:String url] — required<br />
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded [page:Object3D object].<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[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 onLoad with the parsed response content.
</div> </div>
<h2>Methods</h2> <h3>[method:Object3D parse]( [page:Object json] )</h3>
<div>
[page:Object json] — required. The JSON source to parse<br />
</div>
<div>
Parse a <em>JSON</em> content and return a threejs object.
</div>
<h3>todo</h3> <h3>[method:null setCrossOrigin]( [page:String value] )</h3>
<div>todo</div>
<div> <div>
todo [page:String value] — The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
</div> </div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.ObjectLoader();
// assuming we loaded a JSON structure from elsewhere
var object = loader.parse( a_json_object );
scene.add( object );
</code>
[example:webgl_loader_msgpack]
<h2>Source</h2> <h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="../../list.js"></script>
<script src="../../page.js"></script>
<link type="text/css" rel="stylesheet" href="../../page.css" />
</head>
<body>
<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>
<h2>Constructor</h2>
<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>
<h2>Properties</h2>
<h2>Methods</h2>
<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:Geometry geometryAtoms], [page:Geometry geometryBonds] and the [page:Object JSON] structure.<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[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 onLoad with the parsed response content.
</div>
<h3>[method:Object parsePDB]( [page:String text] )</h3>
<div>
[page:String text] — The textual <em>pdb</em> structure to parse.
</div>
<div>
Parse a <em>pdb</em> text and return a <em>JSON</em> structure.<br />
</div>
<h3>[method:null createModel]( [page:Object json], [page:Function callback] )</h3>
<div>
[page:Object json] — The <em>(JSON) pdb</em> structure to parse.<br />
[page:Function callback] — Will be called when parse completes, with three arguments: [page:Geometry geometryAtoms], [page:Geometry geometryBonds] and the original [page:Object json].<br />
</div>
<div>
Parse a <em>(JSON) pdb</em> structure and return two [page:Geometry]: one for atoms, one for bonds.<br />
</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',
// Function when resource is loaded
function ( geometryAtoms, geometryBonds, json ) {
console.log( 'This molecule has ' + json.atoms.length + ' atoms' );
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
</code>
[example:webgl_loader_pdb]
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/PDBLoader.js examples/js/loaders/PDBLoader.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="../../list.js"></script>
<script src="../../page.js"></script>
<link type="text/css" rel="stylesheet" href="../../page.css" />
</head>
<body>
<h1>[name]</h1>
<div class="desc">A loader for loading an <em>.svg</em> resource.</div>
<h2>Constructor</h2>
<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>
<h2>Properties</h2>
<h2>Methods</h2>
<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, that contain .[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 onLoad with the response content.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/SVGLoader.js examples/js/loaders/SVGLoader.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="../../list.js"></script>
<script src="../../page.js"></script>
<link type="text/css" rel="stylesheet" href="../../page.css" />
</head>
<body>
<h1>[name]</h1>
<div class="desc">A loader for loading a [page:Scene] from a <em>JSON</em> resource.</div>
<h2>Constructor</h2>
<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>
<h2>Properties</h2>
<h2>Methods</h2>
<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 an [page:Object] containing the loaded components.<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[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 onLoad with the parsed scene.
</div>
<h3>[method:Object parse]( [page:Object json], [page:Function callbackFinished], [page:String url] )</h3>
<div>
[page:Object json] — The <em>JSON</em> structure to parse.<br />
[page:Function callbackFinished] — Will be called when parse completes.<br />
[page:String url] — Will be used as base for assets' relative URLs.<br />
</div>
<div>
Parse a <em>JSON</em> scene description and return a new [page:Object] with fully instantiated Three.js objects.
</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 addGeometryHandler]( [page:String typeID], [page:Function loaderClass] )</h3>
<div>
[page:String typeID] — The type to handle.<br />
[page:Function loaderClass] — The handler class.<br />
</div>
<div>
Add an handler for a specific geometry type.
</div>
<h3>[method:null addHierarchyHandler]( [page:String typeID], [page:Function loaderClass] )</h3>
<div>
[page:String typeID] — The type to handle.<br />
[page:Function loaderClass] — The handler class.<br />
</div>
<div>
Add an handler for a specific object type.
</div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.SceneLoader();
// Handle STL geometries
loader.addGeometryHandler( "stl", THREE.STLLoader );
// Handle OBJ objects
loader.addHierarchyHandler( "obj", THREE.OBJLoader );
// load a JSON resource
loader.load(
// resource URL
'scenes/test_scene.js',
// Function when resource is loaded
function ( result ) {
scene.add( result.scene );
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
</code>
[example:webgl_loader_scene]
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/SceneLoader.js examples/js/loaders/SceneLoader.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="../../list.js"></script>
<script src="../../page.js"></script>
<link type="text/css" rel="stylesheet" href="../../page.css" />
</head>
<body>
<h1>[name]</h1>
<div class="desc">Class for loading a <em>.tga</em> [page:DataTexture texture].</div>
<h2>Constructor</h2>
<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>
<h2>Methods</h2>
<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, that contain .[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 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).
</div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.TGALoader();
// load a resource
var texture = loader.load(
// resource URL
'textures/crate_grey8.tga'
// Function when resource is loaded
function ( texture ) {
console.log( 'Texture is loaded' );
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
var material = new THREE.MeshPhongMaterial( {
color: 0xffffff,
map: texture
} );
</code>
[example:webgl_materials_texture_tga]
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/TGALoader.js examples/js/loaders/TGALoader.js]
</body>
</html>
...@@ -10,86 +10,73 @@ ...@@ -10,86 +10,73 @@
<h1>[name]</h1> <h1>[name]</h1>
<div class="desc">Class for loading a [page:Texture texture].</div> <div class="desc">Class for loading a [page:Texture texture].</div>
<div class="desc">Unlike other loaders, this one emits events instead of using predefined callbacks. So if you're interested in getting notified when <em>things</em> happen, you need to add listeners to the object.</div>
<h2>Constructor</h2>
<h2>Constructor</h2>
<h3>[name]()</h3> <h3>[name]( [page:LoadingManager manager] )</h3>
<div> <div>
todo [page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
</div>
<h2>Events</h2>
<h3>load</h3>
<div class="desc">
Dispatched when the texture has completed loading
</div> </div>
<div> <div>
content — loaded texture object Creates a new [name].
</div> </div>
<h3>error</h3>
<div class="desc">
Dispatched when the texture can't be loaded
</div>
<div>
message — error message
</div>
<h2>Properties</h2> <h2>Properties</h2>
<h3>[property:todo crossOrigin]</h3> <h3>[property:String crossOrigin]</h3>
<div> <div>
default — *null*.<br /> default — *null*.<br />
If set, assigns the *crossOrigin* attribute of the image to the value of *crossOrigin*, prior to starting the load. If set, assigns the *crossOrigin* attribute of the image to the value of *crossOrigin*, prior to starting the load.
</div> </div>
<h2>Methods</h2>
<h3>[method:todo load]( [page:String url] )</h3> <h2>Methods</h2>
<div>
url — required
</div>
<div class="desc">Begin loading from <em>url</em></div>
<h3>[method:todo dispatchEvent]([page:todo event])</h3> <h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div> <div>
event -- todo [page:String url] — required<br />
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded text response.<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
</div> </div>
<div> <div>
todo Begin loading from url and pass the loaded [page:Texture texture] to onLoad.
</div> </div>
<h3>[method:todo hasEventListener]([page:todo type], [page:todo listener])</h3>
<div>
type -- todo <br />
listener -- todo
</div>
<div>
todo
</div>
<h3>[method:todo removeEventListener]([page:todo type], [page:todo listener])</h3>
<div>
type -- todo <br />
listener -- todo
</div>
<div>
todo
</div>
<h3>[method:todo addEventListener]([page:todo type], [page:todo listener])</h3> <h2>Example</h2>
<div>
type -- todo <br /> <code>
listener -- todo // instantiate a loader
</div> var loader = new THREE.TextureLoader();
<div>
todo // load a resource
</div> loader.load(
// resource URL
'textures/land_ocean_ice_cloud_2048.jpg',
// Function when resource is loaded
function ( texture ) {
// do something with the texture
var material = new THREE.MeshBasicMaterial( {
map: texture
} );
},
// Function called when download progresses
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// Function called when download errors
function ( xhr ) {
console.log( 'An error happened' );
}
);
</code>
[example:canvas_geometry_earth]
<h2>Source</h2> <h2>Source</h2>
......
...@@ -7,38 +7,70 @@ ...@@ -7,38 +7,70 @@
<link type="text/css" rel="stylesheet" href="../../page.css" /> <link type="text/css" rel="stylesheet" href="../../page.css" />
</head> </head>
<body> <body>
<h1>[name]</h1>
<div class="desc">todo</div> <h1>[name]</h1>
<h2>Example</h2> <div class="desc">A low level class for loading resources with XmlHttpRequest, used internaly by most loaders.</div>
<code>todo</code>
<h2>Constructor</h2> <h2>Constructor</h2>
<h3>[name]( [page:LoadingManager manager] )</h3>
<h3>todo</h3> <div>
<div></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>
<h2>Properties</h2> <h2>Properties</h2>
<h3>todo</h3> <h3>[property:Cache cache]</h3>
<div>
A [page:Cache cache] instance that hold the response from each request made through this loader, so each file is requested once.
</div>
<h3>[property:String crossOrigin]</h3>
<div>
The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
</div>
<h3>[property:String responseType]</h3>
<div> <div>
todo Can be set to change the response type.
</div> </div>
<h2>Methods</h2> <h2>Methods</h2>
<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 text response.<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[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 return the [page:String text] response that will contain the data.
</div>
<h3>todo</h3> <h3>[method:null setCrossOrigin]( [page:String value] )</h3>
<div>todo</div>
<div> <div>
todo [page:String value] — The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
</div> </div>
<h3>[method:null setResponseType]( [page:String value] )</h3>
<div>
[page:String value] — the empty string (default), "arraybuffer", "blob", "document", "json", or "text".
</div>
<h2>Example</h2>
[example:webgl_morphtargets_human]
<h2>Source</h2> <h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="../../list.js"></script>
<script src="../../page.js"></script>
<link type="text/css" rel="stylesheet" href="../../page.css" />
</head>
<body>
[page:Loader] &rarr;
<h1>[name]</h1>
<div class="desc">
A loader for loading a <em>.gltf</em> resource in <em>JSON</em> format.
<br /><br />
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.
</div>
<h2>Constructor</h2>
<h3>[name]( )</h3>
<div>
Creates a new [name].
</div>
<h2>Properties</h2>
<h2>Methods</h2>
<h3>[method:Object3D load]( [page:String url], [page:Function callback] )</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 />
</div>
<div>
Begin loading from url and call the callback function with the parsed response content.
</div>
<h2>Notes</h2>
<div>
This class is often used with [page:glTFAnimator THREE.glTFAnimator] to animate parsed animations.
</div>
<h2>Example</h2>
<code>
// instantiate a loader
var loader = new THREE.glTFLoader();
// load a glTF resource
loader.load(
// resource URL
'models/gltf/duck/duck.json',
// Function when resource is loaded
function ( object ) {
scene.add( object.scene );
}
);
</code>
[example:webgl_loader_gltf]
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/gltf/glTFLoader.js examples/js/loaders/gltf/glTFLoader.js]
</body>
</html>
...@@ -46,15 +46,25 @@ var list = { ...@@ -46,15 +46,25 @@ var list = {
"Loaders": [ "Loaders": [
[ "BabylonLoader", "api/loaders/BabylonLoader" ],
[ "BufferGeometryLoader", "api/loaders/BufferGeometryLoader" ], [ "BufferGeometryLoader", "api/loaders/BufferGeometryLoader" ],
[ "Cache", "api/loaders/Cache" ], [ "Cache", "api/loaders/Cache" ],
[ "ColladaLoader", "api/loaders/ColladaLoader" ],
[ "glTFLoader", "api/loaders/glTFLoader" ],
[ "ImageLoader", "api/loaders/ImageLoader" ], [ "ImageLoader", "api/loaders/ImageLoader" ],
[ "JSONLoader", "api/loaders/JSONLoader" ], [ "JSONLoader", "api/loaders/JSONLoader" ],
[ "Loader", "api/loaders/Loader" ], [ "Loader", "api/loaders/Loader" ],
[ "LoadingManager", "api/loaders/LoadingManager" ], [ "LoadingManager", "api/loaders/LoadingManager" ],
[ "MaterialLoader", "api/loaders/MaterialLoader" ], [ "MaterialLoader", "api/loaders/MaterialLoader" ],
[ "MTLLoader", "api/loaders/MTLLoader" ],
[ "OBJLoader", "api/loaders/OBJLoader" ],
[ "OBJMTLLoader", "api/loaders/OBJMTLLoader" ],
[ "ObjectLoader", "api/loaders/ObjectLoader" ], [ "ObjectLoader", "api/loaders/ObjectLoader" ],
[ "PDBLoader", "api/loaders/PDBLoader" ],
[ "SVGLoader", "api/loaders/SVGLoader" ],
[ "SceneLoader", "api/loaders/SceneLoader" ],
[ "TextureLoader", "api/loaders/TextureLoader" ], [ "TextureLoader", "api/loaders/TextureLoader" ],
[ "TGALoader", "api/loaders/TGALoader" ],
[ "XHRLoader", "api/loaders/XHRLoader" ] [ "XHRLoader", "api/loaders/XHRLoader" ]
], ],
......
...@@ -173,6 +173,7 @@ ...@@ -173,6 +173,7 @@
"webgl_lines_splines", "webgl_lines_splines",
"webgl_loader_assimp2json", "webgl_loader_assimp2json",
"webgl_loader_awd", "webgl_loader_awd",
"webgl_loader_babylon",
"webgl_loader_collada", "webgl_loader_collada",
"webgl_loader_collada_keyframe", "webgl_loader_collada_keyframe",
"webgl_loader_collada_skinning", "webgl_loader_collada_skinning",
......
...@@ -15,9 +15,11 @@ THREE.SVGLoader.prototype = { ...@@ -15,9 +15,11 @@ THREE.SVGLoader.prototype = {
load: function ( url, onLoad, onProgress, onError ) { load: function ( url, onLoad, onProgress, onError ) {
var scope = this;
var parser = new DOMParser(); var parser = new DOMParser();
var loader = new THREE.XHRLoader(); var loader = new THREE.XHRLoader( scope.manager );
loader.setCrossOrigin( this.crossOrigin ); loader.setCrossOrigin( this.crossOrigin );
loader.load( url, function ( svgString ) { loader.load( url, function ( svgString ) {
......
此差异已折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - Babylon loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - BabylonLoader test
</div>
<script src="../build/three.min.js"></script>
<script src="js/loaders/BabylonLoader.js"></script>
<script>
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
// texture
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var texture = new THREE.Texture();
var material = new THREE.MeshBasicMaterial( { color: 'red' } );
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {
};
// model
var loader = new THREE.BabylonLoader( manager );
loader.load( 'models/babylon/skull.babylon', function ( babylonScene ) {
scene.add( babylonScene );
}, onProgress, onError );
//
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>
...@@ -16,7 +16,7 @@ THREE.BufferGeometryLoader.prototype = { ...@@ -16,7 +16,7 @@ THREE.BufferGeometryLoader.prototype = {
var scope = this; var scope = this;
var loader = new THREE.XHRLoader(); var loader = new THREE.XHRLoader( scope.manager );
loader.setCrossOrigin( this.crossOrigin ); loader.setCrossOrigin( this.crossOrigin );
loader.load( url, function ( text ) { loader.load( url, function ( text ) {
......
...@@ -16,7 +16,7 @@ THREE.MaterialLoader.prototype = { ...@@ -16,7 +16,7 @@ THREE.MaterialLoader.prototype = {
var scope = this; var scope = this;
var loader = new THREE.XHRLoader(); var loader = new THREE.XHRLoader( scope.manager );
loader.setCrossOrigin( this.crossOrigin ); loader.setCrossOrigin( this.crossOrigin );
loader.load( url, function ( text ) { loader.load( url, function ( text ) {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册