Class Texture

Create a Texture to apply to a surface or as a reflection or refraction map.

After the initial use of a texture, its dimensions, format, and type cannot be changed
Instead, call .dispose() on the Texture and instantiate a new Texture.

// load a texture, set wrap mode to repeat
const texture = new THREE.TextureLoader().load("textures/water.jpg");
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4);

Hierarchy (view full)

Constructors

Properties

DEFAULT_ANISOTROPY: number

The Global default value for .anisotropy.

1.

DEFAULT_IMAGE: any

The Global default value for .image.

null.

DEFAULT_MAPPING: Mapping

The Global default value for .mapping.

THREE.UVMapping

isTexture: true

Read-only flag to check if a given object is of type Texture.

This is a constant value

true

id: number

Unique number for this Texture instance.

Note that ids are assigned in chronological order: 1, 2, 3, ..., incrementing by one for each new object.

uuid: string

UUID of this object instance.

This gets automatically assigned and shouldn't be edited.

name: string

Optional name of the object

(doesn't need to be unique).

""

source: Source

The data definition of a texture. A reference to the data source can be shared across textures.
This is often useful in context of spritesheets where multiple textures render the same data
but with different Texture transformations.

mipmaps: any[]

Array of user-specified mipmaps

[]

mapping: AnyMapping

How the image is applied to the object.

All Texture types except THREE.CubeTexture expect the values be THREE.Mapping

Texture Constants

value of THREE.Texture.DEFAULT_MAPPING

channel: number

Lets you select the uv attribute to map the texture to. 0 for uv, 1 for uv1, 2 for uv2 and 3 for
uv3.

wrapS: Wrapping

This defines how the Texture is wrapped horizontally and corresponds to U in UV mapping.

for WEBGL1 - tiling of images in textures only functions if image dimensions are powers of two
(2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels.
Individual dimensions need not be equal, but each must be a power of two. This is a limitation of WebGL1, not three.js.
WEBGL2 does not have this limitation.

THREE.ClampToEdgeWrapping

wrapT: Wrapping

This defines how the Texture is wrapped vertically and corresponds to V in UV mapping.

for WEBGL1 - tiling of images in textures only functions if image dimensions are powers of two
(2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels.
Individual dimensions need not be equal, but each must be a power of two. This is a limitation of WebGL1, not three.js.
WEBGL2 does not have this limitation.

THREE.ClampToEdgeWrapping

How the Texture is sampled when a texel covers more than one pixel.

THREE.LinearFilter

How the Texture is sampled when a texel covers less than one pixel.

THREE.LinearMipmapLinearFilter

anisotropy: number

The number of samples taken along the axis through the pixel that has the highest density of texels.

A higher value gives a less blurry result than a basic mipmap, at the cost of more Texture samples being used.

value of THREE.Texture.DEFAULT_ANISOTROPY. That is normally 1.

These define how elements of a 2D texture, or texels, are read by shaders.

All Texture types except THREE.DepthTexture and THREE.CompressedPixelFormat expect the values be THREE.PixelFormat

THREE.RGBAFormat.

This must correspond to the .format.

THREE.UnsignedByteType, is the type most used by Texture formats.

THREE.UnsignedByteType

internalFormat: null | PixelFormatGPU

The GPU Pixel Format allows the developer to specify how the data is going to be stored on the GPU.

Compatible only with WebGL2RenderingContext | WebGL 2 Rendering Context.

Texture Constants

The default value is obtained using a combination of .format and .type.

matrix: Matrix3

The uv-transform matrix for the texture.

When .matrixAutoUpdate property is true.
Will be updated by the renderer from the properties:

.matrixAutoUpdate

new THREE.Matrix3()

matrixAutoUpdate: boolean

Whether is to update the texture's uv-transform .matrix.

Set this to false if you are specifying the uv-transform matrix directly.

.matrix

true

offset: Vector2

How much a single repetition of the texture is offset from the beginning, in each direction U and V.

Typical range is 0.0 to 1.0.

new THREE.Vector2(0, 0)

repeat: Vector2

How many times the texture is repeated across the surface, in each direction U and V.

If repeat is set greater than 1 in either direction, the corresponding Wrap parameter should
also be set to THREE.RepeatWrapping or THREE.MirroredRepeatWrapping to achieve the desired tiling effect.

new THREE.Vector2( 1, 1 )

center: Vector2

The point around which rotation occurs.

A value of (0.5, 0.5) corresponds to the center of the texture.

new THREE.Vector2( 0, 0 ), lower left.

rotation: number

How much the texture is rotated around the center point, in radians.

Positive values are counter-clockwise.

0

generateMipmaps: boolean

Whether to generate mipmaps, (if possible) for a texture.

Set this to false if you are creating mipmaps manually.

true
premultiplyAlpha: boolean

If set to true, the alpha channel, if present, is multiplied into the color channels when the texture is uploaded to the GPU.

Note that this property has no effect for ImageBitmap.
You need to configure on bitmap creation instead. See THREE.ImageBitmapLoader | ImageBitmapLoader.

THREE.ImageBitmapLoader | ImageBitmapLoader.

false

flipY: boolean

If set to true, the texture is flipped along the vertical axis when uploaded to the GPU.

Note that this property has no effect for ImageBitmap.
You need to configure on bitmap creation instead. See THREE.ImageBitmapLoader | ImageBitmapLoader.

THREE.ImageBitmapLoader | ImageBitmapLoader.

true

unpackAlignment: number

Specifies the alignment requirements for the start of each pixel row in memory.

The allowable values are:

  • 1 (byte-alignment)
  • 2 (rows aligned to even-numbered bytes)
  • 4 (word-alignment)
  • 8 (rows start on double-word boundaries).

glPixelStorei for more information.

4

colorSpace: ColorSpace

The Textures | {@link Texture constants} page for details of other color spaces.

Textures containing color data should be annotated with THREE.SRGBColorSpace or
THREE.LinearSRGBColorSpace.

THREE.NoColorSpace

isRenderTargetTexture: boolean

Indicates whether a texture belongs to a render target or not

false

userData: Record<string, any>

An object that can be used to store custom data about the texture.

It should not hold references to functions as these will not be cloned.

{}

version: number

This starts at 0 and counts how many times .needsUpdate is set to true.

Expects a Integer

0

pmremVersion: number

Indicates whether this texture should be processed by PMREMGenerator or not (only relevant for render target
textures)

onUpdate: (() => void)

A callback function, called when the texture is updated (e.g., when needsUpdate has been set to true and then the texture is used).

Accessors

  • get image(): any
  • An image object, typically created using the THREE.TextureLoader.load | TextureLoader.load() method.

    Returns any

    This can be any image (e.g., PNG, JPG, GIF, DDS) or video (e.g., MP4, OGG/OGV) type supported by three.js.

  • set image(data): void
  • Parameters

    • data: any

    Returns void

  • set needsUpdate(value): void
  • Set this to true to trigger an update next time the texture is used. Particularly important for setting the wrap mode.

    Parameters

    • value: boolean

    Returns void

  • set needsPMREMUpdate(value): void
  • Indicates whether this texture should be processed by THREE.PMREMGenerator or not.

    Parameters

    • value: boolean

    Returns void

    Only relevant for render target textures.

    false

Methods

  • Update the texture's UV-transform .matrix from the texture properties
    .offset,
    .repeat,
    .rotation and
    .center.

    Returns void

  • Make copy of the texture

    Returns this

    Note this is not a "deep copy", the image is shared

  • Parameters

    Returns this

  • Convert the texture to three.js JSON Object/Scene format.

    Parameters

    • Optionalmeta: string | {}

      Optional object containing metadata.

    Returns {}

    • Frees the GPU-related resources allocated by this instance

      Returns void

      Call this method whenever this instance is no longer used in your app.

    • Adds a listener to an event type.

      Type Parameters

      • T extends "dispose"

      Parameters

      • type: T

        The type of event to listen to.

      • listener: EventListener<{
            dispose: {};
        }[T], T, Texture>

        The function that gets called when the event is fired.

      Returns void

    • Type Parameters

      • T extends string

      Parameters

      Returns void

    • Checks if listener is added to an event type.

      Type Parameters

      • T extends "dispose"

      Parameters

      • type: T

        The type of event to listen to.

      • listener: EventListener<{
            dispose: {};
        }[T], T, Texture>

        The function that gets called when the event is fired.

      Returns boolean

    • Type Parameters

      • T extends string

      Parameters

      Returns boolean

    • Removes a listener from an event type.

      Type Parameters

      • T extends "dispose"

      Parameters

      • type: T

        The type of the listener that gets removed.

      • listener: EventListener<{
            dispose: {};
        }[T], T, Texture>

        The listener function that gets removed.

      Returns void

    • Type Parameters

      • T extends string

      Parameters

      Returns void

    • Fire an event type.

      Type Parameters

      • T extends "dispose"

      Parameters

      • event: BaseEvent<T> & {
            dispose: {};
        }[T]

        The event that gets fired.

      Returns void