ThreeJS Loader 1
AnimationLoader
Class for loading AnimationClips in JSON format. This uses the FileLoader internally for loading files.
Code Example
// instantiate a loader
const loader = new THREE.AnimationLoader();
// load a resource
loader.load(
// resource URL
'animations/animation.js',
// onLoad callback
function ( animations ) {
// animations is an array of AnimationClips
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log( 'An error happened' );
}
);
Constructor
AnimationLoader( manager : LoadingManager )
manager — The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager.
Creates a new AnimationLoader.
Properties
See the base Loader class for common properties.
Methods
See the base Loader class for common methods.
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
url — the path or URL to the file. This can also be a Data URI.
onLoad — Will be called when load completes. The argument will be the loaded animation clips.
onProgress (optional) — Will be called while load progresses. The argument will be the ProgressEvent instance, which contains .lengthComputable, .total and .loaded. If the server does not set the Content-Length header; .total will be 0.
onError (optional) — Will be called if load errors.
Begin loading from url and pass the loaded animation to onLoad.
.parse ( json : JSON ) : Array
json — required
Parse the JSON object and return an array of animation clips. Individual clips in the object will be parsed with AnimationClip.parse.
AudioLoader
Class for loading an AudioBuffer. This uses the FileLoader internally for loading files.
Code Example
// instantiate a listener
const audioListener = new THREE.AudioListener();
// add the listener to the camera
camera.add( audioListener );
// instantiate audio object
const oceanAmbientSound = new THREE.Audio( audioListener );
// add the audio object to the scene
scene.add( oceanAmbientSound );
// instantiate a loader
const loader = new THREE.AudioLoader();
// load a resource
loader.load(
// resource URL
'audio/ambient_ocean.ogg',
// onLoad callback
function ( audioBuffer ) {
// set the audio object buffer to the loaded object
oceanAmbientSound.setBuffer( audioBuffer );
// play the audio
oceanAmbientSound.play();
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log( 'An error happened' );
}
);
Constructor
AudioLoader( manager : LoadingManager )
manager — The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager.
Creates a new AudioLoader.
Properties
See the base Loader class for common properties.
Methods
See the base Loader class for common methods.
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
url — the path or URL to the file. This can also be a Data URI.
onLoad — Will be called when load completes. The argument will be the loaded text response.
onProgress (optional) — Will be called while load progresses. The argument will be the ProgressEvent instance, which contains .lengthComputable, .total and .loaded. If the server does not set the Content-Length header; .total will be 0.
onError (optional) — Will be called when load errors.
Begin loading from url and pass the loaded AudioBuffer to onLoad.
BufferGeometryLoader
A loader for loading a BufferGeometry. This uses the FileLoader internally for loading files.
Code Example
// instantiate a loader
const loader = new THREE.BufferGeometryLoader();
// load a resource
loader.load(
// resource URL
'models/json/pressure.json',
// onLoad callback
function ( geometry ) {
const material = new THREE.MeshLambertMaterial( { color: 0xF5F5F5 } );
const object = new THREE.Mesh( geometry, material );
scene.add( object );
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log( 'An error happened' );
}
);
Constructor
BufferGeometryLoader( manager : LoadingManager )
manager — The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager.
Creates a new BufferGeometryLoader.
Properties
See the base Loader class for common properties.
Methods
See the base Loader class for common methods.
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
url — the path or URL to the file. This can also be a Data URI.d
onLoad — Will be called when load completes. The argument will be the loaded BufferGeometry.
onProgress (optional) — Will be called while load progresses. The argument will be the ProgressEvent instance, which contains .lengthComputable, .total and .loaded. If the server does not set the Content-Length header; .total will be 0.
onError (optional) — Will be called when load errors.
Begin loading from url and call onLoad with the parsed response content.
.parse ( json : Object ) : BufferGeometry
json — The JSON structure to parse.
Parse a JSON structure and return a BufferGeometry.
Cache
A simple caching system, used internally by FileLoader.
Code Example
To enable caching across all loaders that use FileLoader, set
THREE.Cache.enabled = true.
Properties
.enabled : Boolean
Whether caching is enabled. Default is false.
.files : Object
An object that holds cached files.
Methods
.add ( key : String, file : Object ) : undefined
key — the key to reference the cached file by.
file — The file to be cached.
Adds a cache entry with a key to reference the file. If this key already holds a file, it is overwritten.
.get ( key : String ) : Any
key — A string key
Get the value of key. If the key does not exist undefined is returned.
.remove ( key : String ) : undefined
key — A string key that references a cached file.
Remove the cached file associated with the key.
.clear () : undefined
Remove all values from the cache.
CompressedTextureLoader
Abstract base class for block based textures loader (dds, pvr, ...). This uses the FileLoader internally for loading files.
Constructor
CompressedTextureLoader( manager : LoadingManager )
manager — The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager.
Creates a new CompressedTextureLoader.
Properties
See the base Loader class for common properties.
Methods
See the base Loader class for common methods.
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : CompressedTexture
url — the path or URL to the file. This can also be a Data URI.
onLoad (optional) — Will be called when load completes. The argument will be the loaded texture.
onProgress (optional) — Will be called while load progresses. The argument will be the ProgressEvent instance, which contains .lengthComputable, .total and .loaded. If the server does not set the Content-Length header; .total will be 0.
onError (optional) — Will be called when load errors.
Begin loading from url and pass the loaded texture to onLoad. The method also returns a new texture object which can directly be used for material creation.
CubeTextureLoader
Class for loading a CubeTexture. This uses the ImageLoader internally for loading files.
Code Example
const scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
.setPath( 'textures/cubeMaps/' )
.load( [
'px.png',
'nx.png',
'py.png',
'ny.png',
'pz.png',
'nz.png'
] );
Constructor
CubeTextureLoader( manager : LoadingManager )
manager — The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager.
Creates a new CubeTextureLoader.
Properties
See the base Loader class for common properties.
Methods
See the base Loader class for common methods.
.load ( urls : String, onLoad : Function, onProgress : Function, onError : Function ) : CubeTexture
urls — array of 6 urls to images, one for each side of the CubeTexture. The urls should be specified in the following order: pos-x, neg-x, pos-y, neg-y, pos-z, neg-z. They can also be Data URIs.
Note that, by convention, cube maps are specified in a coordinate system in which positive-x is to the right when looking up the positive-z axis -- in other words, using a left-handed coordinate system. Since three.js uses a right-handed coordinate system, environment maps used in three.js will have pos-x and neg-x swapped.
onLoad (optional) — Will be called when load completes. The argument will be the loaded texture.
onProgress (optional) — This callback function is currently not supported.
onError (optional) — Will be called when load errors.
Begin loading from url and pass the loaded texture to onLoad. The method also returns a new texture object which can directly be used for material creation.
DataTextureLoader
Abstract base class to load generic binary textures formats (rgbe, hdr, ...). This uses the FileLoader internally for loading files, and creates a new DataTexture.
Constructor
DataTextureLoader( manager : LoadingManager )
manager — The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager.
Creates a new DataTextureLoader.
Properties
See the base Loader class for common properties.
Methods
See the base Loader class for common methods.
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : DataTexture
url — the path or URL to the file. This can also be a Data URI.
onLoad (optional) — Will be called when load completes. The argument will be the loaded texture.
onProgress (optional) — Will be called while load progresses.The argument will be the ProgressEvent instance, which contains .lengthComputable, .total and .loaded. If the server does not set the Content-Length header; .total will be 0.
onError (optional) — Will be called when load errors.
Begin loading from url and pass the loaded texture to onLoad. The method also returns a new texture object which can directly be used for material creation.
FileLoader
A low level class for loading resources with Fetch, used internaly by most loaders. It can also be used directly to load any file type that does not have a loader.
Code Example
const loader = new THREE.FileLoader();
//load a text file and output the result to the console
loader.load(
// resource URL
'example.txt',
// onLoad callback
function ( data ) {
// output the text to the console
console.log( data )
},
// onProgress callback
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.error( 'An error happened' );
}
);
Note: The cache must be enabled using
THREE.Cache.enabled = true;
This is a global property and only needs to be set once to be used by all loaders that use FileLoader internally. Cache is a cache module that holds the response from each request made through this loader, so each file is requested once.
Constructor
FileLoader ( manager : LoadingManager )
manager — The loadingManager for the loader to use. Default is DefaultLoadingManager.
Properties
See the base Loader class for common properties.
.mimeType : String
The expected mimeType. See .setMimeType. Default is undefined.
.responseType : String
The expected response type. See .setResponseType. Default is undefined.
Methods
See the base Loader class for common methods.
.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
url — the path or URL to the file. This can also be a Data URI.
onLoad (optional) — Will be called when loading completes. The argument will be the loaded response.
onProgress (optional) — Will be called while load progresses. The argument will be the ProgressEvent instance, which contains .lengthComputable, .total and .loaded. If the server does not set the Content-Length header; .total will be 0.
onError (optional) — Will be called if an error occurs.
Load the URL and pass the response to the onLoad function.
.setMimeType ( mimeType : String ) : this
Set the expected mimeType of the file being loaded. Note that in many cases this will be determined automatically, so by default it is undefined.
.setResponseType ( responseType : String ) : this
Change the response type. Valid values are:
text or empty string (default) - returns the data as String.
arraybuffer - loads the data into a ArrayBuffer and returns that.
blob - returns the data as a Blob.
document - parses the file using the DOMParser.
json - parses the file using JSON.parse.