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.