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} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {buildTorusGeometry} from "../src/scene/geometry/builders/buildTorusGeometry.js";
import {ReadableGeometry} from "../src/scene/geometry/ReadableGeometry.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";
import {Texture} from "../src/scene/materials/Texture.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 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 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 path to the image file this Texture from, if any.

public set

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

public get

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

Default value is [0, 0].

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 wrap parameter for this Texture's S coordinate.

Values can be:

  • "clampToEdge" - causes S coordinates to be clamped to the size of the texture.
  • "mirroredRepeat" - 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.
  • "repeat" - (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 "repeat".

public get

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

Values can be:

  • "clampToEdge" - causes S coordinates to be clamped to the size of the texture.
    • "mirroredRepeat" - 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.
  • "repeat" - (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 "repeat".

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

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 String
  • optional
  • default: "linearMipmapLinear"

How the texture is sampled when a texel covers less than one pixel. See the Texture#minFilter property for more info.

cfg.magFilter String
  • optional
  • default: "linear"

How the texture is sampled when a texel covers more than one pixel. See the Texture#magFilter property for more info.

cfg.wrapS String
  • optional
  • default: "repeat"

Wrap parameter for texture coordinate S. See the Texture#wrapS property for more info.

cfg.wrapT String
  • optional
  • default: "repeat"

Wrap parameter for texture coordinate S. See the Texture#wrapT property for more info.

cfg.flipY Boolean
  • optional
  • default: false

Flips this Texture's source data along its vertical axis when true.

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.

cfg.encoding String
  • optional
  • default: "linear"

Encoding format. See the Texture#encoding property for more info.

Public Members

public get encoding: String source

Gets the Texture's encoding format.

public get flipY: Boolean 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: String source

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

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

Default value is "linearMipmapLinear".

public get minFilter: String source

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

Options are:

  • "nearest" - Uses the value of the texture element that is nearest (in Manhattan distance) to the center of the pixel being textured.

  • "linear" - Uses the weighted average of the four texture elements that are closest to the center of the pixel being textured.

  • "nearestMipmapNearest" - 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.

  • "linearMipmapNearest" - 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.

  • "nearestMipmapLinear" - 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.

  • "linearMipmapLinear" - (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 "linearMipmapLinear".

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 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 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 src: String source

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

Returns null if not set.

public set src: String source

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

Sets Texture#image null.

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 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 wrapS: String source

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

Values can be:

  • "clampToEdge" - causes S coordinates to be clamped to the size of the texture.
  • "mirroredRepeat" - 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.
  • "repeat" - (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 "repeat".

public get wrapT: String source

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

Values can be:

  • "clampToEdge" - causes S coordinates to be clamped to the size of the texture.
    • "mirroredRepeat" - 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.
  • "repeat" - (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 "repeat".

Public Methods

public destroy() source

Destroys this Texture

Override:

Component#destroy