Creating mesh from custom source with VTK.js

409 Views Asked by At

I'm trying to display a mesh in a react ts app using @kitware/vtk.js 18.1.2 and a custom source.

First I created a working scene with a cone source:

// (...)
const coneSource = vtkConeSource.newInstance();

const mapper = vtkMapper.newInstance();
// @ts-ignore
mapper.setInputConnection(coneSource.getOutputPort());
// (...)

And it works as expected, despite functions like setInputConnection and getOutputPort not being declared (that's why I used @ts-ignore).

Now I'm trying to display my own data by creating a custom vtkPolyData. There are tutorials in the documentation of vtk.js and an example usage of vtkPolyData is as follows:

const polyData = vtkPolyData.newInstance()
Const vertices = new Float32Array(<xyz coords>)
Const polys = new Uint32Array(<poly definitions>)
polyData.getPoints().setData(vertices, 3)
polyData.getPolys().setData(polys);

It didn't work because the API seems to have changed (?) so I tried to do it this way:

const polyData = vtkPolyData.newInstance();
polyData.setVerts(vertices);
polyData.setPolys(polys);

Where vertices is Float32Array in format of [x1, y1, z1, x2, y2, z2, ...] and polys is Uint32Array in format of [4, p1, p2, p3, p4, ...] (my mesh uses only quads).

Then I connected it to the mapper:

// @ts-ignore
mapper.setInputData(meshSource);

Again setInputData wasn't declared but everything compiled anyway and there were no errors in the console. Unfortunately all I see is the background of the renderer. How can I display my custom data? Am I even going in right direction? I'm new to VTK.

0

There are 0 best solutions below