[page:Texture] →


Creates an array of textures directly from raw data, width and height and depth. This type of texture can only be used with a WebGL 2 rendering context.


[name]( data, width, height, depth )

The data argument must be an [link:https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView ArrayBufferView]. The properties inherited from [page:Texture] are the default, except magFilter and minFilter default to THREE.NearestFilter. The properties flipY and generateMipmaps are initially set to false.

The interpretation of the data depends on type and format: If the type is THREE.UnsignedByteType, a Uint8Array will be useful for addressing the texel data. If the format is THREE.RGBAFormat, data needs four values for one texel; Red, Green, Blue and Alpha (typically the opacity). Similarly, THREE.RGBFormat specifies a format where only three values are used for each texel.
For the packed types, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type or THREE.UnsignedShort565Type, all color components of one texel can be addressed as bitfields within an integer element of a Uint16Array.
In order to use the types THREE.FloatType and THREE.HalfFloatType, the WebGL implementation must support the respective extensions OES_texture_float and OES_texture_half_float. In order to use THREE.LinearFilter for component-wise, bilinear interpolation of the texels based on these types, the WebGL extensions OES_texture_float_linear or OES_texture_half_float_linear must also be present.

Code Example

This creates a [name] where each texture has a different color.

// create a buffer with color data const width = 512; const height = 512; const depth = 100; const size = width * height; const data = new Uint8Array( 3 * size * depth ); for ( let i = 0; i < depth; i ++ ) { const color = new THREE.Color( Math.random(), Math.random(), Math.random() ); const r = Math.floor( color.r * 255 ); const g = Math.floor( color.g * 255 ); const b = Math.floor( color.b * 255 ); for ( let j = 0; j < size; j ++ ) { const stride = ( i * size + j ) * 3; data[ stride ] = r; data[ stride + 1 ] = g; data[ stride + 2 ] = b; } } // used the buffer to create a [name] const texture = new THREE.DataTexture2DArray( data, width, height, depth ); texture.format = THREE.RGBFormat; texture.needsUpdate = true;


[example:webgl2_materials_texture2darray WebGL2 / materials / texture2darray]


See the base [page:Texture Texture] class for common properties.

[property:Image image]

Overridden with a record type holding data, width and height and depth.


See the base [page:Texture Texture] class for common methods.


[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]