Best way to display an image from a gltf in a HTML image div

Questions
,
1

So i want to display images from a glb/gltf in a html div
the current work flow i use is

  1. Get material.map which will have a THREE.texture object
  2. Get the image from image key of the THREE.texture object . This will be a ImageBitamp object with only width and height keys present
  3. Make a html canvas ,then use drawImage(imageBitmap,0,0,w,h)
  4. Then use canvas.toDataURL("image/png") to get base64 of image
  5. Then create image element and add the base 64 as src to the this img element
  6. Append to body

Is there a more optimised way to just display the image ?

2

The only way to show an instance of ImageBitamp as an image is to draw it onto a canvas. You then have to use toDataURL() in order to use the canvas as the image’s data source.

So what you are doing right now is already correct.

2 Likes
3

I am trying to get the image using canvas from ImageBitmap.

small images are getting load using canvas.toDataURL() but a 4mb image is not getting load completely.

Since ImageBitmap does not have src property not able to create a closure

                const c = document.createElement('canvas');
                c.width = this.#originalMaterials[key].image.width;
                c.height = this.#originalMaterials[key].image.height;
                const ctx = c.getContext('2d');
                ctx.drawImage(this.#originalMaterials[key].image, 0, 0, this.#originalMaterials[key].image.width, this.#originalMaterials[key].image.height, 0, 0, c.width, c.height);
                    console.log(c.toDataURL());