Showing a volumetric tiff image in browser


I work with volumetric tiff microscopy images coming from the biomedical domain (one such tiff image captured at a nanometer resolution with an electron microscope is re-saved as an animated gif just for context - here, we scroll through the depth dimension)

X1_019.tif (1.7 MB)
I was wondering if it would be possible to import such tiff files and show them in the browser, or would I need to re-save these images in a different data format to use the Dataloader class. I had an idea for a visualization similar to this in mind.
Any tips are welcome. Thank you!

This example looks even similar to your gif: three.js webgl - 2D texture array

I think you have to find a way to extract the data from the tif file and provide is as raw data like mentioned in this article. You could then reuse the code from the above example.

Or you try to save your texture as NRRD. The project provides a loader for this file format.


Thank you @Mugen87 for the suggestion on extracting data from the tif file. I decided to save the tif file as a nrrd and use the NRRDLoader which you also recommended.
Unfortunately the code I am trying right now reveals no significant error, but I also see no output in the browser.
Would you have any insight on what I am doing wrong here? I only started recently with three.js, so any tips are appreciated. Thank you very much!

I have downloaded your NRRD file and added it to the official loader example. The result looks like so:

I’ve just replaced the URL to the new asset and removed the usage of VTKLoader (since it’s not relevant for your use case). Since you are using outdated library files in your codesandbox (from r102), I suggest you try it with the latest version of three.js.


That looks amazing. I wasn’t aware of this example in particular.
Thank you for directing me to here!

1 Like