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

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 ?

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