Texture.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. * @author alteredq / http://alteredqualia.com/
  4. * @author szimek / https://github.com/szimek/
  5. */
  6. import { EventDispatcher } from '../core/EventDispatcher.js';
  7. import { UVMapping } from '../constants.js';
  8. import { MirroredRepeatWrapping, ClampToEdgeWrapping, RepeatWrapping, LinearEncoding, UnsignedByteType, RGBAFormat, LinearMipMapLinearFilter, LinearFilter } from '../constants.js';
  9. import { _Math } from '../math/Math.js';
  10. import { Vector2 } from '../math/Vector2.js';
  11. import { Matrix3 } from '../math/Matrix3.js';
  12. var textureId = 0;
  13. function Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding ) {
  14. Object.defineProperty( this, 'id', { value: textureId ++ } );
  15. this.uuid = _Math.generateUUID();
  16. this.name = '';
  17. this.image = image !== undefined ? image : Texture.DEFAULT_IMAGE;
  18. this.mipmaps = [];
  19. this.mapping = mapping !== undefined ? mapping : Texture.DEFAULT_MAPPING;
  20. this.wrapS = wrapS !== undefined ? wrapS : ClampToEdgeWrapping;
  21. this.wrapT = wrapT !== undefined ? wrapT : ClampToEdgeWrapping;
  22. this.magFilter = magFilter !== undefined ? magFilter : LinearFilter;
  23. this.minFilter = minFilter !== undefined ? minFilter : LinearMipMapLinearFilter;
  24. this.anisotropy = anisotropy !== undefined ? anisotropy : 1;
  25. this.format = format !== undefined ? format : RGBAFormat;
  26. this.type = type !== undefined ? type : UnsignedByteType;
  27. this.offset = new Vector2( 0, 0 );
  28. this.repeat = new Vector2( 1, 1 );
  29. this.center = new Vector2( 0, 0 );
  30. this.rotation = 0;
  31. this.matrixAutoUpdate = true;
  32. this.matrix = new Matrix3();
  33. this.generateMipmaps = true;
  34. this.premultiplyAlpha = false;
  35. this.flipY = true;
  36. this.unpackAlignment = 4; // valid values: 1, 2, 4, 8 (see http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml)
  37. // Values of encoding !== THREE.LinearEncoding only supported on map, envMap and emissiveMap.
  38. //
  39. // Also changing the encoding after already used by a Material will not automatically make the Material
  40. // update. You need to explicitly call Material.needsUpdate to trigger it to recompile.
  41. this.encoding = encoding !== undefined ? encoding : LinearEncoding;
  42. this.version = 0;
  43. this.onUpdate = null;
  44. }
  45. Texture.DEFAULT_IMAGE = undefined;
  46. Texture.DEFAULT_MAPPING = UVMapping;
  47. Texture.prototype = Object.assign( Object.create( EventDispatcher.prototype ), {
  48. constructor: Texture,
  49. isTexture: true,
  50. clone: function () {
  51. return new this.constructor().copy( this );
  52. },
  53. copy: function ( source ) {
  54. this.name = source.name;
  55. this.image = source.image;
  56. this.mipmaps = source.mipmaps.slice( 0 );
  57. this.mapping = source.mapping;
  58. this.wrapS = source.wrapS;
  59. this.wrapT = source.wrapT;
  60. this.magFilter = source.magFilter;
  61. this.minFilter = source.minFilter;
  62. this.anisotropy = source.anisotropy;
  63. this.format = source.format;
  64. this.type = source.type;
  65. this.offset.copy( source.offset );
  66. this.repeat.copy( source.repeat );
  67. this.center.copy( source.center );
  68. this.rotation = source.rotation;
  69. this.matrixAutoUpdate = source.matrixAutoUpdate;
  70. this.matrix.copy( source.matrix );
  71. this.generateMipmaps = source.generateMipmaps;
  72. this.premultiplyAlpha = source.premultiplyAlpha;
  73. this.flipY = source.flipY;
  74. this.unpackAlignment = source.unpackAlignment;
  75. this.encoding = source.encoding;
  76. return this;
  77. },
  78. toJSON: function ( meta ) {
  79. var isRootObject = ( meta === undefined || typeof meta === 'string' );
  80. if ( ! isRootObject && meta.textures[ this.uuid ] !== undefined ) {
  81. return meta.textures[ this.uuid ];
  82. }
  83. function getDataURL( image ) {
  84. var canvas;
  85. if ( image instanceof HTMLCanvasElement ) {
  86. canvas = image;
  87. } else {
  88. canvas = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
  89. canvas.width = image.width;
  90. canvas.height = image.height;
  91. var context = canvas.getContext( '2d' );
  92. if ( image instanceof ImageData ) {
  93. context.putImageData( image, 0, 0 );
  94. } else {
  95. context.drawImage( image, 0, 0, image.width, image.height );
  96. }
  97. }
  98. if ( canvas.width > 2048 || canvas.height > 2048 ) {
  99. return canvas.toDataURL( 'image/jpeg', 0.6 );
  100. } else {
  101. return canvas.toDataURL( 'image/png' );
  102. }
  103. }
  104. var output = {
  105. metadata: {
  106. version: 4.5,
  107. type: 'Texture',
  108. generator: 'Texture.toJSON'
  109. },
  110. uuid: this.uuid,
  111. name: this.name,
  112. mapping: this.mapping,
  113. repeat: [ this.repeat.x, this.repeat.y ],
  114. offset: [ this.offset.x, this.offset.y ],
  115. center: [ this.center.x, this.center.y ],
  116. rotation: this.rotation,
  117. wrap: [ this.wrapS, this.wrapT ],
  118. minFilter: this.minFilter,
  119. magFilter: this.magFilter,
  120. anisotropy: this.anisotropy,
  121. flipY: this.flipY
  122. };
  123. if ( this.image !== undefined ) {
  124. // TODO: Move to THREE.Image
  125. var image = this.image;
  126. if ( image.uuid === undefined ) {
  127. image.uuid = _Math.generateUUID(); // UGH
  128. }
  129. if ( ! isRootObject && meta.images[ image.uuid ] === undefined ) {
  130. meta.images[ image.uuid ] = {
  131. uuid: image.uuid,
  132. url: getDataURL( image )
  133. };
  134. }
  135. output.image = image.uuid;
  136. }
  137. if ( ! isRootObject ) {
  138. meta.textures[ this.uuid ] = output;
  139. }
  140. return output;
  141. },
  142. dispose: function () {
  143. this.dispatchEvent( { type: 'dispose' } );
  144. },
  145. transformUv: function ( uv ) {
  146. if ( this.mapping !== UVMapping ) return;
  147. uv.applyMatrix3( this.matrix );
  148. if ( uv.x < 0 || uv.x > 1 ) {
  149. switch ( this.wrapS ) {
  150. case RepeatWrapping:
  151. uv.x = uv.x - Math.floor( uv.x );
  152. break;
  153. case ClampToEdgeWrapping:
  154. uv.x = uv.x < 0 ? 0 : 1;
  155. break;
  156. case MirroredRepeatWrapping:
  157. if ( Math.abs( Math.floor( uv.x ) % 2 ) === 1 ) {
  158. uv.x = Math.ceil( uv.x ) - uv.x;
  159. } else {
  160. uv.x = uv.x - Math.floor( uv.x );
  161. }
  162. break;
  163. }
  164. }
  165. if ( uv.y < 0 || uv.y > 1 ) {
  166. switch ( this.wrapT ) {
  167. case RepeatWrapping:
  168. uv.y = uv.y - Math.floor( uv.y );
  169. break;
  170. case ClampToEdgeWrapping:
  171. uv.y = uv.y < 0 ? 0 : 1;
  172. break;
  173. case MirroredRepeatWrapping:
  174. if ( Math.abs( Math.floor( uv.y ) % 2 ) === 1 ) {
  175. uv.y = Math.ceil( uv.y ) - uv.y;
  176. } else {
  177. uv.y = uv.y - Math.floor( uv.y );
  178. }
  179. break;
  180. }
  181. }
  182. if ( this.flipY ) {
  183. uv.y = 1 - uv.y;
  184. }
  185. }
  186. } );
  187. Object.defineProperty( Texture.prototype, "needsUpdate", {
  188. set: function ( value ) {
  189. if ( value === true ) this.version ++;
  190. }
  191. } );
  192. export { Texture };
粤ICP备19079148号