Creates a texture for use with a video.

Remarks

Note: After the initial use of a texture, the video cannot be changed Instead, call .dispose() on the texture and instantiate a new one.

Example

// assuming you have created a HTML video element with id="video"
const video = document.getElementById('video');
const texture = new THREE.VideoTexture(video);

See

Hierarchy (view full)

Constructors

Properties

anisotropy: number

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

Remarks

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

Default

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

center: Vector2

The point around which rotation occurs.

Remarks

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

Default Value

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

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.

colorSpace: ColorSpace

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

Remarks

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

See

Default Value

{@link THREE.NoColorSpace}
encoding: TextureEncoding

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

Remarks

Values of encoding !== THREE.LinearEncoding are only supported on map, envMap and emissiveMap.

See

Default Value

{@link THREE.LinearEncoding}

Deprecated

Use .colorSpace in three.js r152+.

flipY: boolean

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

Remarks

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

See

ImageBitmapLoader.

Default Value

true

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

Remarks

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

See

Default Value

{@link THREE.RGBAFormat}.
generateMipmaps: boolean

Default Value

false

id: number

Unique number for this Texture instance.

Remarks

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

internalFormat: null | PixelFormatGPU

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

Remarks

Compatible only with WebGL2RenderingContext | WebGL 2 Rendering Context.

See

Texture Constants

Default Value

The default value is obtained using a combination of {@link Texture.format | .format} and {@link Texture.type | .type}.
isRenderTargetTexture: boolean

Indicates whether a texture belongs to a render target or not

Default Value

false

isTexture: true

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

Remarks

This is a constant value

Default Value

true

isVideoTexture: true

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

Remarks

This is a constant value

Default Value

true

Default Value

{@link THREE.LinearFilter}
mapping: AnyMapping

How the image is applied to the object.

Remarks

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

See

Texture Constants

Default Value

_value of_ {@link THREE.Texture.DEFAULT_MAPPING}
matrix: Matrix3

The uv-transform matrix for the texture.

Remarks

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

See

.matrixAutoUpdate

Default Value

new THREE.Matrix3()

matrixAutoUpdate: boolean

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

Remarks

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

See

.matrix

Default Value

true

Default Value

{@link THREE.LinearFilter}
mipmaps: any[]

Array of user-specified mipmaps

Default Value

[]

name: string

Optional name of the object

Remarks

(doesn't need to be unique).

Default Value

""

needsPMREMUpdate: boolean

Indicates whether this texture should be processed by THREE.PMREMGenerator or not.

Remarks

Only relevant for render target textures.

Default Value

false

offset: Vector2

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

Remarks

Typical range is 0.0 to 1.0.

Default Value

new THREE.Vector2(0, 0)

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).

Type declaration

    • (): void
    • Returns void

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.

Remarks

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

See

ImageBitmapLoader.

Default Value

false

repeat: Vector2

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

Remarks

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.

See

Default Value

new THREE.Vector2( 1, 1 )

rotation: number

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

Remarks

Positive values are counter-clockwise.

Default Value

0

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.

This must correspond to the .format.

Remarks

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

See

Default Value

{@link THREE.UnsignedByteType}
unpackAlignment: number

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

Remarks

The allowable values are:

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

See

glPixelStorei for more information.

Default Value

4

userData: Record<string, any>

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

Remarks

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

Default Value

{}

uuid: string

UUID of this object instance.

Remarks

This gets automatically assigned and shouldn't be edited.

version: number

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

Remarks

Expects a Integer

Default Value

0

wrapS: Wrapping

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

Remarks

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.

See

Default Value

{@link THREE.ClampToEdgeWrapping}
wrapT: Wrapping

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

Remarks

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.

See

Default Value

{@link THREE.ClampToEdgeWrapping}
DEFAULT_ANISOTROPY: number

The Global default value for .anisotropy.

Default Value

1.

DEFAULT_IMAGE: any

The Global default value for .image.

Default Value

null.

DEFAULT_MAPPING: Mapping

The Global default value for .mapping.

Default Value

{@link THREE.UVMapping}

Accessors

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

    Returns any

    Remarks

    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
  • You will not need to set this manually here as it is handled by the update() method.

    Parameters

    • value: boolean

    Returns void

Methods

  • 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, VideoTexture>

      The function that gets called when the event is fired.

    Returns void

  • Type Parameters

    • T extends string

    Parameters

    Returns void

  • Make copy of the texture

    Returns this

    Remarks

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

  • Parameters

    Returns this

  • Fire an event type.

    Type Parameters

    • T extends "dispose"

    Parameters

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

      The event that gets fired.

    Returns void

  • Frees the GPU-related resources allocated by this instance

    Returns void

    Remarks

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

  • 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, VideoTexture>

      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, VideoTexture>

      The listener function that gets removed.

    Returns void

  • Type Parameters

    • T extends string

    Parameters

    Returns void

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

    Parameters

    • Optional meta: string | {}

      Optional object containing metadata.

    Returns {}

    • This is called automatically and sets .needsUpdate to true every time a new frame is available.

      Returns void