I am loading GLB into the scene, and I have modal in the app that contains the list of the textures in the scene. Same as you have in your inspector tool, under textures tab.
So I need to get images/textures and populate the previewImageContainer (green container), with those textures. So the user can see the texture preview there.
Of course. I noticed that you are using “canvas” element there. Should I use canvas? I would like to use “img” element if possible.
I kinda get textures urls but I don’t know what to do with them, as I cannot set them as source of the image.
This is what I get from the textures src property
I’m not sure you can use img because you need to provide a value for the src property: you can create a temporary url with URL.createObjectURL(blob), so it ends up being able to create blob given an ArrayBuffer (what you get when doing texture.readPixels()).
However, I don’t know how to create a blob representing a picture given a raw array of r/g/b/a bytes… I don’t think a mime type exists that would match a rgba array of data, in which case you would do: img.src = URL.createObjectURL(new Blob([texture.readPixels().buffer], { type: "mimetype" })).
If you can convert the raw data to png, you can do: img.src = URL.createObjectURL(new Blob([dataPng], { type: "image/png" })).
canvas allows you to create a png data url easily ( canvas.toDataURL("image/png");), but if you use a canvas in the first place, you don’t need to do all that, just display the canvas!
Thank you so much. This helps a lot. As for your question, canvas default size is 300x150. When setting with and height in ImageData you define size for image drawn inside the canvas (and canvas is by default 300x150, basically the rest of the image get cut off). You need to set size of the canvas element separately.
