js/Mobilizing/renderer/3D/three/texture/Texture.js
import * as THREE from 'three';
/**
* Texture are bitmap pictures loaded in the graphic card memory so they can be mapped on a geometry surface. Usually, texture are mapped through a Material. Keep in mind that WebGL, as an impletation of OpenGL, shares the same kind of limitations : textures sources should be power of 2 (even if here, Three.js is doing the job of resizing for you if they're not).
* Constants list for possible texture's mapping mode :
*
* Texture.UVMapping
* Texture.CubeReflectionMapping
* Texture.CubeRefractionMapping
* Texture.EquirectangularReflectionMapping
* Texture.EquirectangularRefractionMapping
* Texture.CubeUVReflectionMapping
*/
export default class Texture {
/**
* @param {Object} params Parameters object, given by the constructor.
* @param {Context} params.image the Image object.
* @param {String} params.canvas the canvas object.
*/
constructor({
image = undefined,
canvas = undefined,
cubeCamera = undefined,
} = {}) {
this.image = image;
this.canvas = canvas;
this.cubeCamera = cubeCamera;
if (!this.cubeCamera) {
this._texture = new THREE.Texture();
}
else {
console.log(this.cubeCamera.getCubeRenderTarget().texture);
this._texture = this.cubeCamera.getCubeRenderTarget().texture;
}
if (this.image) {
this.fromImage(this.image);
}
else if (this.canvas) {
this.fromCanvas(this.canvas);
}
}
/**
* @returns the Three.js native object used in this class
*/
getNativeObject() {
return this._texture;
}
/**
* Create the texture from an image file
* @param {Image} image tells if the loader should force the main process to wait for the end of
*/
fromImage(image) {
this._texture.image = image;
this._texture.needsUpdate = true;
this.width = image.width;
this.height = image.height;
}
/**
* Create the texture from a Canvas DOM element (can be Mobilizing itself -> when we'll can catch a WebGL canvas pixels...)
* @param {canvas} canvas canvas
*/
fromCanvas(canvas) {
this._texture.image = canvas;
this._texture.needsUpdate = true;
this._texture.magFilter = THREE.LinearFilter;
//this._texture.minFilter = THREE.LinearMipMapLinearFilter;
this._texture.minFilter = THREE.LinearFilter;
this.width = this._texture.image.width;
this.height = this._texture.image.height;
//custom events management, used internally to autamatically refresh texture after drawn
if (canvas.events) {
canvas.events.on("drawn", () => {
this.setNeedsUpdate(true);
});
}
}
/**
* Clears the underlying Three.js texture object
*/
erase() {
this._texture.dispose();
}
/**
* Define the repetition factor of this texture. If the value is > 1, then the texture will be mapped twice on the surface and so on. NB: usage of this method automatically sets the wrapS and wrapT properties to RepeatWrapping
*
* @param {float} u the new u texture coordinate repetition to use
* @param {float} v the new u texture coordinate repetition to use
*/
setRepeat(u, v) {
if (this._texture && this._texture !== undefined) {
this._texture.repeat.set(u, v);
this._texture.wrapS = THREE.RepeatWrapping;
this._texture.wrapT = THREE.RepeatWrapping;
}
}
/**
* How much a single repetition of the texture is offset from the beginning, in each direction U and V. Typical range is 0.0 to 1.0.
* @param {Numbe} val offset between 0.0 to 1.0
*/
setOffset(val) {
this._texture.offset = val;
}
//TODO : setter and getter for Three.js texture props mapping
/**
* Set this to true to trigger an update next time the texture is used. Particularly important for setting the wrap mode.
* @param {Boolean} val
*/
setNeedsUpdate() {
this._texture.needsUpdate = true;
}
/**
* False by default, which is the norm for PNG images. Set to true if the RGB values have been stored premultiplied by alpha.
*
* @param {Boolean} val
*/
setPremultiplyAlpha(val) {
this._texture.premultiplyAlpha = val;
}
/**
* How the image is applied to the object. An object type of Texture.UVMapping is the default, where the U,V coordinates are used to apply the map.
* @param {Number} mapping
*/
setMapping(mapping) {
this._texture.mapping = mapping;
}
}
Texture.UVMapping = THREE.UVMapping;
Texture.CubeReflectionMapping = THREE.CubeReflectionMapping;
Texture.CubeRefractionMapping = THREE.CubeRefractionMapping;
Texture.EquirectangularReflectionMapping = THREE.EquirectangularReflectionMapping;
Texture.EquirectangularRefractionMapping = THREE.EquirectangularRefractionMapping;
Texture.CubeUVReflectionMapping = THREE.CubeUVReflectionMapping;