My object shows all black in STL Reader of VTK.js

312 Views Asked by At

I am using vtk.js in my angular app to display 3D STL objects. I know STL files don't have color info, but at least my 3D object should be white and details of it could be seen. However, my 3D object is full black, zero details.

import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkSTLReader from 'vtk.js/Sources/IO/Geometry/STLReader';

ngOnInit(): void {
    const reader = vtkSTLReader.newInstance();
    const mapper = vtkMapper.newInstance({ scalarVisibility: false });
    const actor = vtkActor.newInstance();

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

    function update() {
      const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
      const renderer = fullScreenRenderer.getRenderer();
      const renderWindow = fullScreenRenderer.getRenderWindow();
    
      const resetCamera = renderer.resetCamera;
      const render = renderWindow.render;

      renderer.addActor(actor);
      resetCamera();
      render();
    }

    const myContainer = document.querySelector('body');
    const fileContainer = document.createElement('div');
    fileContainer.innerHTML = '<input type="file" class="file"/>';
    myContainer.appendChild(fileContainer);

    const fileInput = fileContainer.querySelector('input');

    function handleFile(event) {
      event.preventDefault();
      const dataTransfer = event.dataTransfer;
      const files = event.target.files || dataTransfer.files;
      if (files.length === 1) {
        myContainer.removeChild(fileContainer);
        const fileReader = new FileReader();
        fileReader.onload = function onLoad(e) {
          reader.parseAsArrayBuffer(fileReader.result);
          update();
        };
        fileReader.readAsArrayBuffer(files[0]);
      }
    }

    fileInput.addEventListener('change', handleFile);

    reader.setUrl("./assets/test2.stl", { binary: true }).then(update);
}

How can I add color to my object? I couldn't find any example about it, either.

0

There are 0 best solutions below