Vtk.js: Import multi STLs

Question

I'm using Vtk.js to display 3D content on a web interface.

My problem happens when I try to load multiple models (STL format).

I'm using this logic:

PS: files is an array of attributes of my STLs, the 'url' attribute is the path of the STL

const fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();

for (var i = files.length - 1; i >= 0; i--)
{
    var mapper = vtk.Rendering.Core.vtkMapper.newInstance({ scalarVisibility: false });
    var actor = vtk.Rendering.Core.vtkActor.newInstance();
    var reader = vtk.IO.Geometry.vtkSTLReader.newInstance();

    actor.setMapper(mapper);
    mapper.setInputConnection(reader.getOutputPort());

    actor.getProperty().setColor( files[i].color );
    actor.getProperty().setOpacity( files[i].opacity );

    fullScreenRenderer.getRenderer().addActor(actor);

    reader.setUrl( files[i].url , { binary: true }).then( update) ;
}

function update()
{  
    fullScreenRenderer.getRenderer().resetCamera();
    fullScreenRenderer.getRenderer().setLayer(1);
    fullScreenRenderer.getRenderWindow().render();
} 

The problem is that every 3D model is black. If I remove the setLayer(1), the whole screen is black.

I think this happend because I'm not using the correct "pipeline". But I don't have that much experience with this library to know, the doc is still not complete, it is not helping.

Answer 1

This works for me (but I don't understand why at all...)

const fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();

var actors = [];


for (var i = files.length - 1; i >= 0; i--)
{
    var mapper = vtk.Rendering.Core.vtkMapper.newInstance({ scalarVisibility: false });
    actors[i] = vtk.Rendering.Core.vtkActor.newInstance();
    var reader = vtk.IO.Geometry.vtkSTLReader.newInstance();

    actors[i].setMapper(mapper);
    mapper.setInputConnection(reader.getOutputPort());

    actors[i].getProperty().setColor( files[i].color );
    actors[i].getProperty().setOpacity( files[i].opacity );

    fullScreenRenderer.getRenderer().addActor(actor);

    reader.setUrl( files[i].url , { binary: true }).then( update(i) ) ;
}

function update(i)
{  
    actors[i].getProperty().setColor( files[i].color );
    fullScreenRenderer.getRenderer().resetCamera();
    fullScreenRenderer.getRenderWindow().render();
}