How can i convert the result of a fetch api for an image to texture

Questions
1

Hi Friends

I am using an api to fetch a png image as follows:

export const getSRXDataBinary = async (obj) => {
const response = await fetch(‘/api’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/octet-stream’,
},
body: JSON.stringify(obj),
responseType: “arraybuffer”
}).catch((e) => {
return { status: false, data: e.message };
});
if (response.status !== 200) {
return { status: false, data: response.statusText };
}
return response.arrayBuffer();
};

So, because of that i cant use the usual three.TexturLoader() since that requires an image url and i dont have that. I have to get the image raw data from an api in the backend.
When i get the data back i can display it as an image using this code:

 const base64 = btoa(
            new Uint8Array(rawdata.reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ''
            )
          )
    
         myimage.src = `data:image/png;base64,${base64}`

But I am stuck trying to create a texture for this image as well.
How can i convert raw data to Texture so i can map that image in 3D as well.

Thanks

2

All the loader classes have a “parse” method that you can pass the raw arraybuffer:
https://threejs.org/docs/#api/en/loaders/Loader.parse

So maybe something like:
let myTexture = new THREE.TextureLoader().parse( yourArrayBuffer )
will work.

3

I think it is not advisable to convert raw data to data-url. It’s much better to use an url to Blob from your data:

const url = URL.createObjectURL(new Blob([rawdata], { type: 'image/png' })),
  texture = new TextureLoader().load(url, ()=>URL.revokeObjectURL(url));
1 Like
4

Thanks @manthrax, I did trythe parse after you suggested it. But i get null texture back. I even converted my array buffer to Uint8Array but that did not work either. This is my code:

let texture = new THREE.TextureLoader().parse(rawdata );

texture is null after the parse is executed.

Let me know what might be missing here.

5

Read what @trueshko wrote ^

6

Thanks @trueshko. Your suggestion did the trick.

2 Likes