Logo

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.

Related Topics

ThreeJS Animation Systems

You may animate many aspects of your models with the three.js animation system, including the bones of a skinned and rigged model, morph targets, multiple material properties (colours, opacity, booleans),...

3 minutes read.

ThreeJS Disposing an Object

The disposal of unwanted library entities is a crucial component of improving performance and avoiding memory leaks in your programme. When you create a three.js type instance, you set aside...

4 minutes read.

ThreeJS Raycaster

This class is intended to help with raycasting. Raycasting is used for a variety of purposes, including mouse picking (determining which objects in 3D space the mouse is over). Code Example const...

4 minutes read.

ThreeJS Audio

It is used to create a non-positional (global ) audio object. Code Example: // create an AudioListener and add it to the camera const listener = new THREE.AudioListener(); camera.add( listener ); // create a global...

6 minutes read.

ThreeJS AnimationMixer

The AnimationMixer is a player that allows you to play animations on a specific object in the scene. When many items in a scene are animated individually, each object may...

2 minutes read.

ThreeJS Cameras

ArrayCamera ArrayCamera can be used to render a scene using a preset group of cameras quickly. This is an important feature of VR scene rendering performance. An array of sub cameras is...

6 minutes read.

ThreeJS Helper 1

ArrowHelper A 3D arrow object for visualizing directions. Code Example const dir = new THREE.Vector3( 1, 2, 0 ); //normalize the direction vector (convert to vector of length 1) dir.normalize(); const origin = new THREE.Vector3( 0,...

5 minutes read.

ThreeJS Material - Mesh

MeshBasicMaterial A material for drawing geometries in a simple shaded (flat or wireframe) way. This material is not affected by lights. Constructor MeshBasicMaterial( parameters : Object ) parameters - (optional) an object with one or...

24 minutes read.

ThreeJS Installation

You can use npm and modern build tools to install three.js, or you can get started quickly with static hosting or a CDN. Installing from npm is the best option...

4 minutes read.

ThreeJS Lines and Texts

Drawing Lines Let's say you want to draw a line or a circle, not a wireframe Mesh. First, we need to set up the renderer, scene, and camera. Here is the...

3 minutes read.

ThreeJS Math

Box2 Represents an axis-aligned bounding box (AABB) in 2D space. Constructor Box2( min : Vector2, max : Vector2 ) min - (optional) Vector2 representing the lower (x, y) boundary of the box. Default is...

48 minutes read.

ThreeJS Renderers

WebGLMultipleRenderTargets A special render target that enables a fragment shader to write to several textures. This approach is useful for advanced rendering techniques like post-processing or deferred rendering. Heads up: WebGLMultipleRenderTargets...

15 minutes read.

ThreeJS AnimationAction

AnimationActions are used to schedule the playback of animations saved in AnimationClips. Note that the majority of AnimationAction's methods can be chained together. The "Animation System" page in the "Next Steps" part...

6 minutes read.

ThreeJS Property Binding and Mixer

PropertyBinding Internally, this holds a reference to real property in the scene graph. Constructor PropertyBinding( rootNode : Object3D, path, parsedPath ) -- rootNode: -- path -- parsedPath (optional) Properties The properties are as follows: .path : Number.parsedPath...

2 minutes read.

ThreeJS Scenes

Fog This class contains the parameters that define linear fog, i.e., that grows linearly denser with the distance. Constructor Fog( color : Integer, near : Float, far : Float ) The color parameter is...

3 minutes read.

ThreeJS Using post-processing

Many three.js applications render their 3D objects directly to the screen. Sometimes, however, you want to apply one or more graphical effects like Depth-Of-Field, Bloom, Film Grain or various types...

2 minutes read.

ThreeJS Compatibiliy Check and Running Locally

Even though this is becoming less of an issue, some devices or browsers may still be incompatible with WebGL. The method below enables you to check if it is supported...

3 minutes read.

ThreeJS Uniform

Uniforms are global GLSL variables. They are passed to shader programs. Code Example When declaring a uniform of a ShaderMaterial, it is declared by value or by object. uniforms: { time: { value: 1.0...

2 minutes read.

ThreeJS Managers

DefaultLoadingManager When no custom manager is specified, most loaders use a global instance of the LoadingManager. This will suffice for most purposes, but there may be times when you want separate loading...

4 minutes read.

ThreeJS Matrix Transformations

Three.js encodes 3D transformations using matrices for translations (position), rotations, and scaling. Every Object3D instance has a matrix that records the location, rotation, and scale of the object. This page...

2 minutes read.