Load HDRi dynamically

Questions
1

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

2

  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 }) ?

3

image
image2585×738 94.4 KB

4

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

5

I tried, RGBELoader has only parse method in this case

6

have you solved this issue bro? same problem occured…

7

Which issue specifically?

The error in the main post is due to wrong format of data, where the texture buffer did not align with RGBE parsing requirements and you’re pushing wrong type of buffer together with a wrong type of texture to the renderer. It can be solved by setting texture.type = THREE.HalfFloatType, or texture.type = THREE.FloatType (depending on the contents of the data buffer and setup of the .loader.)

In the code above texture .type argument was omitted in the constructor, which then will make it default to Texture.type default value, which is UnsignedByteType - and that texture type is not compatible with RGBE / HDRI textures.

8

yeah i see, i did load FileReader result directly(without parse) to solve this problem,thx.