Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface TextureLoader

Class for loading a texture. This uses the ImageLoader internally for loading files.

Examples

geometry / cube

Code Example

 
const texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
// immediately use the texture for material creation
const material = new THREE.MeshBasicMaterial( { map: texture } );

Code Example with Callbacks

 
// instantiate a loader
const loader = new THREE.TextureLoader();
// load a resource
loader.load(
    'textures/land_ocean_ice_cloud_2048.jpg', // resource URL
    function ( texture ) { // onLoad callback
        // in this example we create the material when the texture is loaded
        const material = new THREE.MeshBasicMaterial( { map: texture  } );
    },
    undefined, // onProgress callback currently not supported
    function ( err ) { // onError callback
        console.error( 'An error happened.' );
    }
);

Please note three.js r84 dropped support for TextureLoader progress events. For a TextureLoader that supports progress events, see this thread.

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

crossOrigin

crossOrigin: string

The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS. Default is anonymous.

default

'anonymous'

manager

manager: I3JS.LoadingManager

The loadingManager the loader is using. Default is DefaultLoadingManager.

path

path: string

The base path from which the asset will be loaded. Default is the empty string.

default

''

requestHeader

requestHeader: {}

The request header used in HTTP request. See .setRequestHeader. Default is empty object.

default

{}

Type declaration

  • [header: string]: string

resourcePath

resourcePath: string

The base path from which additional resources like textures will be loaded. Default is the empty string.

default

''

withCredentials

withCredentials: boolean

Whether the XMLHttpRequest uses credentials. See .setWithCredentials. Default is false.

default:

false

Methods

load

  • load(url: string, onLoad?: (texture: I3JS.Texture) => void, onProgress?: (event: ProgressEvent<EventTarget>) => void, onError?: (event: ErrorEvent) => void): I3JS.Texture

  • Begin loading from the given URL and pass the fully loaded texture to onLoad. The method also returns a new texture object which can directly be used for material creation. If you do it this way, the texture may pop up in your scene once the respective loading process is finished.

    Parameters

    • url: string

      The path or URL to the file. This can also be a Data URI.

    • Optional onLoad: (texture: I3JS.Texture) => void

      Will be called when load completes. The argument will be the loaded texture.

    • Optional onProgress: (event: ProgressEvent<EventTarget>) => void

      Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .total and .loaded bytes. If the server does not set the Content-Length header; .total will be 0.

        • (event: ProgressEvent<EventTarget>): void

        • Parameters

          • event: ProgressEvent<EventTarget>

          Returns void

    • Optional onError: (event: ErrorEvent) => void

      Will be called when load errors.

        • (event: ErrorEvent): void

        • Parameters

          • event: ErrorEvent

          Returns void

    Returns I3JS.Texture

loadAsync

  • loadAsync(url: string, onProgress?: (event: ProgressEvent<EventTarget>) => void): Promise<I3JS.Texture>

  • Begin loading from the given URL and pass the fully loaded texture to onLoad. The method also returns a new texture object which can directly be used for material creation. If you do it this way, the texture may pop up in your scene once the respective loading process is finished.

    Parameters

    • url: string

      The path or URL to the file. This can also be a Data URI.

    • Optional onProgress: (event: ProgressEvent<EventTarget>) => void

      Will be called while load progresses. The argument will be the XMLHttpRequest instance, which contains .total and .loaded bytes. If the server does not set the Content-Length header; .total will be 0.

        • (event: ProgressEvent<EventTarget>): void

        • Parameters

          • event: ProgressEvent<EventTarget>

          Returns void

    Returns Promise<I3JS.Texture>

setCrossOrigin

setPath

setRequestHeader

setResourcePath

setWithCredentials

Generated using TypeDoc