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.