import {Texture} from '@xeokit/xeokit-sdk/src/viewer/scene/materials/Texture.js'

public class | source

Texture

Extends:

Component → Texture

A 2D texture map.

Textures are attached to Materials, which are attached to Meshes.
To create a Texture from an image file, set Texture#src to the image file path.
To create a Texture from an HTMLImageElement, set the Texture's Texture#image to the HTMLImageElement.

Usage

In this example we have a Mesh with a PhongMaterial which applies diffuse Texture, and a buildTorusGeometry which builds a ReadableGeometry.

Note that xeokit will ignore PhongMaterial#diffuse and PhongMaterial#specular, since we override those with PhongMaterial#diffuseMap and PhongMaterial#specularMap. The Texture pixel colors directly provide the diffuse and specular components for each fragment across the ReadableGeometry surface.

[Run this example]

import {Viewer, Mesh, buildTorusGeometry,
     ReadableGeometry, PhongMaterial, Texture} from "xeokit-sdk.es.js";

const viewer = new Viewer({
     canvasId: "myCanvas"
});

viewer.camera.eye = [0, 0, 5];
viewer.camera.look = [0, 0, 0];
viewer.camera.up = [0, 1, 0];

new Mesh(viewer.scene, {
     geometry: new ReadableGeometry(viewer.scene, buildTorusGeometry({
         center: [0, 0, 0],
         radius: 1.5,
         tube: 0.5,
         radialSegments: 32,
         tubeSegments: 24,
         arc: Math.PI * 2.0
     }),
     material: new PhongMaterial(viewer.scene, {
         ambient: [0.9, 0.3, 0.9],
         shininess: 30,
         diffuseMap: new Texture(viewer.scene, {
             src: "textures/diffuse/uvGrid2.jpg"
         })
     })
});

Constructor Summary

Public Constructor
public	constructor(owner: Component, cfg: *)

Member Summary

Public Members
public get	encoding: Number Gets the Texture's encoding format.
public get	flipY: Number Gets if this Texture's source data is flipped along its vertical axis.
public set	image: HTMLImageElement Sets an HTML DOM Image object to source this Texture from.
public get	image: HTMLImageElement Gets HTML DOM Image object this Texture is sourced from, if any.
public get	magFilter: Number Gets how this Texture is sampled when a texel covers more than one pixel.
public get	minFilter: Number Gets how this Texture is sampled when a texel covers less than one pixel.
public set	rotate: Number Sets the rotation angles, in degrees, that will be applied to this Texture's S and T UV coordinates. Default value is `0`.
public get	rotate: Number Gets the rotation angles, in degrees, that will be applied to this Texture's S and T UV coordinates. Default value is `0`.
public set	scale: Number[] Sets the 2D scaling vector that will be applied to this Texture's S and T UV coordinates. Default value is `[1, 1]`.
public get	scale: Number[] Gets the 2D scaling vector that will be applied to this Texture's S and T UV coordinates. Default value is `[1, 1]`.
public set	src: String Sets path to an image file to source this Texture from.
public get	src: String Gets path to the image file this Texture from, if any.
public set	translate: Number[] Sets the 2D translation vector added to this Texture's S and T UV coordinates. Default value is `[0, 0]`.
public get	translate: Number[] Gets the 2D translation vector added to this Texture's S and T UV coordinates. Default value is `[0, 0]`.
public get	wrapS: Number Gets the wrap parameter for this Texture's S coordinate. Values can be: ClampToEdgeWrapping - causes S coordinates to be clamped to the size of the texture. MirroredRepeatWrapping - causes the S coordinate to be set to the fractional part of the texture coordinate if the integer part of S is even; if the integer part of S is odd, then the S texture coordinate is set to 1 - frac ⁡ S , where frac ⁡ S represents the fractional part of S. RepeatWrapping - (default) - causes the integer part of the S coordinate to be ignored; xeokit uses only the fractional part, thereby creating a repeating pattern. Default value is RepeatWrapping.
public get	wrapT: Number Gets the wrap parameter for this Texture's T coordinate. Values can be: ClampToEdgeWrapping - causes S coordinates to be clamped to the size of the texture. MirroredRepeatWrapping - causes the S coordinate to be set to the fractional part of the texture coordinate if the integer part of S is even; if the integer part of S is odd, then the S texture coordinate is set to 1 - frac ⁡ S , where frac ⁡ S represents the fractional part of S. RepeatWrapping - (default) - causes the integer part of the S coordinate to be ignored; xeokit uses only the fractional part, thereby creating a repeating pattern. Default value is RepeatWrapping.

Method Summary

Public Methods
public	destroy() Destroys this Texture

Inherited Summary

From class Component
public get	owner: Component The Component that owns the lifecycle of this Component, if any.
public	destroyed: Boolean True as soon as this Component has been destroyed
public	id: String \| Number ID of this Component, unique within the Scene.
public	meta: * Arbitrary, user-defined metadata on this component.
public	scene: Scene The parent Scene that contains this Component.
public	viewer: Viewer The viewer that contains this Scene.
public	clear() Destroys all Components that are owned by this.
public	destroy() Destroys this component.
public	error(message: String) Logs an error for this component to the JavaScript console.
public	fire(event: String, value: Object, forget: Boolean) Fires an event on this component.
public	hasSubs(event: String): Boolean Returns true if there are any subscribers to the given event on this component.
public	isType(type: ): : Boolean Tests if this component is of the given type, or is a subclass of the given type.
public	log(message: String) Logs a console debugging message for this component.
public	off(subId: String) Cancels an event subscription that was previously made with Component#on or Component#once.
public	on(event: String, callback: Function, scope: Object): String Subscribes to an event on this component.
public	once(event: String, callback: Function, scope: Object) Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is subIdd.
public	scheduleTask(task: *) Schedule a task to perform on the next browser interval
public	warn(message: String) Logs a warning for this component to the JavaScript console.

Public Constructors

public constructor(owner: Component, cfg: *) source

Override:

Component#constructor

Params:

Name	Type	Attribute	Description
owner	Component		Owner component. When destroyed, the owner will destroy this Texture as well.
cfg	*	optional	Configs
cfg.id	String	optional	Optional ID for this Texture, unique among all components in the parent scene, generated automatically when omitted.
cfg.src	String	optional default: null	Path to image file to load into this Texture. See the Texture#src property for more info.
cfg.image	HTMLImageElement	optional default: null	HTML Image object to load into this Texture. See the Texture#image property for more info.
cfg.minFilter	Number	optional default: LinearMipmapLinearFilter	How the texture is sampled when a texel covers less than one pixel. Supported values are LinearMipmapLinearFilter, LinearMipMapNearestFilter, NearestMipMapNearestFilter, NearestMipMapLinearFilter and LinearMipMapLinearFilter.
cfg.magFilter	Number	optional default: LinearFilter	How the texture is sampled when a texel covers more than one pixel. Supported values are LinearFilter and NearestFilter.
cfg.wrapS	Number	optional default: RepeatWrapping	Wrap parameter for texture coordinate S. Supported values are ClampToEdgeWrapping, MirroredRepeatWrapping and RepeatWrapping.
cfg.wrapT	Number	optional default: RepeatWrapping	Wrap parameter for texture coordinate T. Supported values are ClampToEdgeWrapping, MirroredRepeatWrapping and RepeatWrapping..
cfg.flipY	Boolean	optional default: false	Flips this Texture's source data along its vertical axis when `true`.
cfg.encoding	Number	optional default: LinearEncoding	Encoding format. Supported values are LinearEncoding and sRGBEncoding.
cfg.translate	Number[]	optional default: [0,0]	2D translation vector that will be added to texture's S and T coordinates.
cfg.scale	Number[]	optional default: [1,1]	2D scaling vector that will be applied to texture's S and T coordinates.
cfg.rotate	Number	optional default: 0	Rotation, in degrees, that will be applied to texture's S and T coordinates.

Public Members

public get encoding: Number source

Gets the Texture's encoding format.

public get flipY: Number source

Gets if this Texture's source data is flipped along its vertical axis.

public set image: HTMLImageElement source

Sets an HTML DOM Image object to source this Texture from.

Sets Texture#src null.

public get image: HTMLImageElement source

Gets HTML DOM Image object this Texture is sourced from, if any.

Returns null if not set.

public get magFilter: Number source

Gets how this Texture is sampled when a texel covers more than one pixel.

NearestFilter - Uses the value of the texture element that is nearest (in Manhattan distance) to the center of the pixel being textured.
LinearFilter - (default) - Uses the weighted average of the four texture elements that are closest to the center of the pixel being textured.

Default value is LinearMipMapLinearFilter.

public get minFilter: Number source

Gets how this Texture is sampled when a texel covers less than one pixel.

Options are:

NearestFilter - Uses the value of the texture element that is nearest (in Manhattan distance) to the center of the pixel being textured.
LinearFilter - Uses the weighted average of the four texture elements that are closest to the center of the pixel being textured.
NearestMipMapNearestFilter - Chooses the mipmap that most closely matches the size of the pixel being textured and uses the "nearest" criterion (the texture element nearest to the center of the pixel) to produce a texture value.
LinearMipMapNearestFilter - Chooses the mipmap that most closely matches the size of the pixel being textured and uses the "linear" criterion (a weighted average of the four texture elements that are closest to the center of the pixel) to produce a texture value.
NearestMipMapLinearFilter - Chooses the two mipmaps that most closely match the size of the pixel being textured and uses the "nearest" criterion (the texture element nearest to the center of the pixel) to produce a texture value from each mipmap. The final texture value is a weighted average of those two values.
LinearMipMapLinearFilter - (default) - Chooses the two mipmaps that most closely match the size of the pixel being textured and uses the "linear" criterion (a weighted average of the four texture elements that are closest to the center of the pixel) to produce a texture value from each mipmap. The final texture value is a weighted average of those two values.

Default value is LinearMipMapLinearFilter.

public set rotate: Number source

Sets the rotation angles, in degrees, that will be applied to this Texture's S and T UV coordinates.

Default value is 0.

public get rotate: Number source

Gets the rotation angles, in degrees, that will be applied to this Texture's S and T UV coordinates.

Default value is 0.

public set scale: Number[] source

Sets the 2D scaling vector that will be applied to this Texture's S and T UV coordinates.

Default value is [1, 1].

public get scale: Number[] source

Gets the 2D scaling vector that will be applied to this Texture's S and T UV coordinates.

Default value is [1, 1].

public set src: String source

Sets path to an image file to source this Texture from.

Sets Texture#image null.

public get src: String source

Gets path to the image file this Texture from, if any.

Returns null if not set.

public set translate: Number[] source

Sets the 2D translation vector added to this Texture's S and T UV coordinates.

Default value is [0, 0].

public get translate: Number[] source

Gets the 2D translation vector added to this Texture's S and T UV coordinates.

Default value is [0, 0].

public get wrapS: Number source

Gets the wrap parameter for this Texture's S coordinate.

Values can be:

ClampToEdgeWrapping - causes S coordinates to be clamped to the size of the texture.
MirroredRepeatWrapping - causes the S coordinate to be set to the fractional part of the texture coordinate if the integer part of S is even; if the integer part of S is odd, then the S texture coordinate is set to 1 - frac ⁡ S , where frac ⁡ S represents the fractional part of S.
RepeatWrapping - (default) - causes the integer part of the S coordinate to be ignored; xeokit uses only the fractional part, thereby creating a repeating pattern.

Default value is RepeatWrapping.

public get wrapT: Number source

Gets the wrap parameter for this Texture's T coordinate.

Values can be:

ClampToEdgeWrapping - causes S coordinates to be clamped to the size of the texture.
- MirroredRepeatWrapping - causes the S coordinate to be set to the fractional part of the texture coordinate if the integer part of S is even; if the integer part of S is odd, then the S texture coordinate is set to 1 - frac ⁡ S , where frac ⁡ S represents the fractional part of S.
RepeatWrapping - (default) - causes the integer part of the S coordinate to be ignored; xeokit uses only the fractional part, thereby creating a repeating pattern.

Default value is RepeatWrapping.

Public Methods

public destroy() source

Destroys this Texture

Override:

Component#destroy