HDRCubeTextureLoader.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import {
  2. CubeTexture,
  3. DataTexture,
  4. FileLoader,
  5. FloatType,
  6. HalfFloatType,
  7. LinearFilter,
  8. LinearSRGBColorSpace,
  9. Loader
  10. } from 'three';
  11. import { RGBELoader } from '../loaders/RGBELoader.js';
  12. /**
  13. * A loader for loading HDR cube textures.
  14. *
  15. * ```js
  16. * const loader = new HDRCubeTextureLoader();
  17. * loader.setPath( 'textures/cube/pisaHDR/' );
  18. * const cubeTexture = await loader.loadAsync( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ] );
  19. *
  20. * scene.background = cubeTexture;
  21. * scene.environment = cubeTexture;
  22. * ```
  23. *
  24. * @augments Loader
  25. * @three_import import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js';
  26. */
  27. class HDRCubeTextureLoader extends Loader {
  28. /**
  29. * Constructs a new HDR cube texture loader.
  30. *
  31. * @param {LoadingManager} [manager] - The loading manager.
  32. */
  33. constructor( manager ) {
  34. super( manager );
  35. /**
  36. * The internal HDR loader that loads the
  37. * individual textures for each cube face.
  38. *
  39. * @type {RGBELoader}
  40. */
  41. this.hdrLoader = new RGBELoader();
  42. /**
  43. * The texture type.
  44. *
  45. * @type {(HalfFloatType|FloatType)}
  46. * @default HalfFloatType
  47. */
  48. this.type = HalfFloatType;
  49. }
  50. /**
  51. * Starts loading from the given URLs and passes the loaded HDR cube texture
  52. * to the `onLoad()` callback.
  53. *
  54. * @param {Array<string>} urls - The paths/URLs of the files to be loaded. This can also be a data URIs.
  55. * @param {function(CubeTexture)} onLoad - Executed when the loading process has been finished.
  56. * @param {onProgressCallback} onProgress - Executed while the loading is in progress.
  57. * @param {onErrorCallback} onError - Executed when errors occur.
  58. * @return {CubeTexture} The HDR cube texture.
  59. */
  60. load( urls, onLoad, onProgress, onError ) {
  61. const texture = new CubeTexture();
  62. texture.type = this.type;
  63. switch ( texture.type ) {
  64. case FloatType:
  65. texture.colorSpace = LinearSRGBColorSpace;
  66. texture.minFilter = LinearFilter;
  67. texture.magFilter = LinearFilter;
  68. texture.generateMipmaps = false;
  69. break;
  70. case HalfFloatType:
  71. texture.colorSpace = LinearSRGBColorSpace;
  72. texture.minFilter = LinearFilter;
  73. texture.magFilter = LinearFilter;
  74. texture.generateMipmaps = false;
  75. break;
  76. }
  77. const scope = this;
  78. let loaded = 0;
  79. function loadHDRData( i, onLoad, onProgress, onError ) {
  80. new FileLoader( scope.manager )
  81. .setPath( scope.path )
  82. .setResponseType( 'arraybuffer' )
  83. .setWithCredentials( scope.withCredentials )
  84. .load( urls[ i ], function ( buffer ) {
  85. loaded ++;
  86. const texData = scope.hdrLoader.parse( buffer );
  87. if ( ! texData ) return;
  88. if ( texData.data !== undefined ) {
  89. const dataTexture = new DataTexture( texData.data, texData.width, texData.height );
  90. dataTexture.type = texture.type;
  91. dataTexture.colorSpace = texture.colorSpace;
  92. dataTexture.format = texture.format;
  93. dataTexture.minFilter = texture.minFilter;
  94. dataTexture.magFilter = texture.magFilter;
  95. dataTexture.generateMipmaps = texture.generateMipmaps;
  96. texture.images[ i ] = dataTexture;
  97. }
  98. if ( loaded === 6 ) {
  99. texture.needsUpdate = true;
  100. if ( onLoad ) onLoad( texture );
  101. }
  102. }, onProgress, onError );
  103. }
  104. for ( let i = 0; i < urls.length; i ++ ) {
  105. loadHDRData( i, onLoad, onProgress, onError );
  106. }
  107. return texture;
  108. }
  109. /**
  110. * Sets the texture type.
  111. *
  112. * @param {(HalfFloatType|FloatType)} value - The texture type to set.
  113. * @return {RGBELoader} A reference to this loader.
  114. */
  115. setDataType( value ) {
  116. this.type = value;
  117. this.hdrLoader.setDataType( value );
  118. return this;
  119. }
  120. }
  121. export { HDRCubeTextureLoader };