Creating input data for MultiSliceImageMapper in vtkjs

Hi all,

I’m trying to reproduce the example here:

The only thing I do not get is you create that headsq.vti file ?

I tried to open it in paraview in order to understand how it is built, but without much success…

Thanks for your help !

You need to create a vtkImageData.

import vtkImageData from 'vtk.js/Sources/Common/DataModel/ImageData';
import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';

const fieldArray = new Float32Array(10 * 20 * 50);
const field = vtkDataArray.newInstance({ name: 'Name of the field', values: fieldArray });

const imageData = vtkImageData.newInstance();
imageData.setDimensions(10, 20, 50);


[... same as example...]

Ok thanks !

Is there any way to get the same output from Paraview, by hand, or does it have to be in js ?

Does your code enable the same results as in vtkjs example, being able to move the slice around the object ?

Thanks !

My code is just for you, so you can use your data within the vtkjs example. The example remain the same and therefore the features as well.

If you plan to use ParaView, then just use ParaView as it should be easier. You can look for “Programmable Source” in Python so you can ingest your data.

Hi all, I’m getting back to you about this issue. I still cannot figure it out so I wanted to ask more precisely.

Here’s my situation. I have a openfoam result that I’m displaying on a website with vtkjs. So far I’m using pvpython to read the result file, do a single slice and export a vtkjs file with this script

Then I read the resulting vtkjs on the website. This process is working perfectly.

Now I would like to be able to reproduce the example with the same results data : I’d like to be able to slide along the vtkjs file created from an openfoam result.

Here’s what I’ve tried and could not figure out:

  • in the example above the dataset ${BASE_PATH}/data/volume/headsq.vti is loaded. I thought I’d just have to create the same .vti file from paraview but I could not figure out how.

  • Thanks to your example code, I realised i needed to create an imageData. I tried the following the codes here :
    and here :
    But I cannot find a way to generate the input file from an Openfoam result to be read by the multiSliceImageMapper.

  • Eventually I went ahead and created several, distincts slice actors in pvpython, that are called succesively with a slider bar. That works but is really ugly, and I’m convinced I should do it better with vtkjs.

Any hint would be greatly appreciated, thanks !