Hello Hello Hello
I just want to render some points with RGBA in HTML use vtk.js.
But nothing to show. I don’t know where is wrong. I’m a newer for vtk.js.
Can anyone show me?
Thanks~~~~~~~~~
Here is the HTML code:
<script type="module">
console.log("Hello");
// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------
const myContainer = document.getElementById('container');
var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
background: [0.0, 0.0, 0.0],
container: myContainer,
});
var renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
// ----------------------------------------------------------------------------
// Simple pipeline ConeSource --> Mapper --> Actor
// ----------------------------------------------------------------------------
const points = vtk.Common.Core.vtkPoints.newInstance();
const nPoints = 3;//////and more
const pointValues = new Float32Array([
0, 0, 0,
10, 0, 0,
0, 10, 0
]);
points.setData(pointValues, 3);
const colorArray = new Uint8Array([
254, 0, 1, 255,
0, 254, 0, 120,
0, 0, 254, 10
]);
const scalars = vtk.Common.Core.vtkDataArray.newInstance({
numberOfComponents: 4,
values: colorArray,
name: 'Colors'
});
const polydata = vtk.Common.DataModel.vtkPolyData.newInstance();
polydata.setPoints(points);
polydata.getPointData().setScalars(scalars);
const cells = vtk.Common.Core.vtkCellArray.newInstance();
for (let i = 0; i < nPoints; i++) {
console.log(i)
cells.insertNextCell([i]);
}
polydata.getVerts().setData(cells);
const mapper = vtk.Rendering.Core.vtkMapper.newInstance();
mapper.setInputData(polydata);
mapper.setScalarModeToUsePointFieldData();
mapper.setColorModeToMapScalars();
mapper.setScalarRange(0, 255);
mapper.update();
const actor = vtk.Rendering.Core.vtkActor.newInstance();
actor.setMapper(mapper);
// ----------------------------------------------------------------------------
// Add the actor to the renderer and set the camera based on it
// ----------------------------------------------------------------------------
renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();
console.log("ok");
</script>