Reference Source
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

Gets the Texture's encoding format.

public get

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

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

public get

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

public set

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

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

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

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

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

public get

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

public set

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

Default value is [0, 0].

public get

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

Default value is [0, 0].

public get

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

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

Destroys this Texture

Inherited Summary

From class Component
public get

The Component that owns the lifecycle of this Component, if any.

public

True as soon as this Component has been destroyed

public

ID of this Component, unique within the Scene.

public

meta: *

Arbitrary, user-defined metadata on this component.

public

The parent Scene that contains this Component.

public

The viewer that contains this Scene.

public

clear()

Destroys all Components that are owned by this.

public

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

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:

NameTypeAttributeDescription
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