Load HDRi dynamically

[Kiryl_Drutsko]

My code:

  document.getElementById('loadHDRiBtn').addEventListener('change', (EO) => {

           let file = EO.target.files[0]; //get a file

           const reader = new FileReader();
           const manager = new THREE.LoadingManager();

           reader.addEventListener('load',  function (event) {
                            const contents = event.target.result;
            
                            const loader = new RGBELoader(manager);
            
                            let data = loader.parse(contents);
            
                            const texture = new THREE.DataTexture(data.data, data.width, data.height);
            
                            texture.needsUpdate = true;
            
                            texture.mapping = THREE.EquirectangularReflectionMapping;
            
                            scene.background = texture;
                            scene.environment = texture;
            }, false);
            
           reader.readAsArrayBuffer(file);

AND it is an error:
WebGL: INVALID_OPERATION: texSubImage2D: type UNSIGNED_BYTE but ArrayBufferView not Uint8Array or Uint8ClampedArray

[mjurczyk]

1. Besides the WebGL shader crash - are you seeing any of the loader errors ?

2. Without the texture-creation part, what appears in the console when you log console.info({ data }) ?

[Kiryl_Drutsko]

@mjurczyk

console.info({ data }) ?

[drcmda]

the data texture part is odd, you should be able to use the return value of rgbeloader directly.

[Kiryl_Drutsko]

@Kiryl_Drutsko

                          const loader = new RGBELoader(manager);
            
                          let data = loader.parse(contents);

I tried, RGBELoader has only parse method in this case