Как добавить цвет и интерполировать файл STL с помощью VTK.JS

Question

Я пытаюсь визуализировать файл STL в веб-приложении, используя VTK.js, и пытаюсь получить некоторую помощь по добавлению цветов и интерполяции.

Я добавил свой код ниже, который в настоящее время выполняет следующее:

• Считывает и отображает файл STL
• Добавляет цвет к точкам, если индекс вершины находится вмассив Pressure_sensors.

У меня есть два вопроса:

1. Это лучший способ добавить цвета к изображению
2. Как лучше интерполироватьмежду указанными точками данных?

Я пытался просмотреть веб-сайт VTK.js, однако я изо всех сил стараюсь добиться того, чтобы добиться большего, чем я уже сделал.

Заранее спасибо, Адам

import 'vtk.js/Sources/favicon';

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';

import vtkOpenGLRenderWindow from 'vtk.js/Sources/Rendering/OpenGL/RenderWindow';
import vtkRenderWindow from 'vtk.js/Sources/Rendering/Core/RenderWindow';
import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor';
import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer';
import vtkInteractorStyleTrackballCamera from 'vtk.js/Sources/Interaction/Style/InteractorStyleTrackballCamera';
import axios from 'axios'
import vtkLookupTable from 'vtk.js/Sources/Common/Core/LookupTable';

//----------------------------------------------------------------------------

// Example code
// ----------------------------------------------------------------------------

const reader = vtkSTLReader.newInstance({ interpolateScalarsBeforeMapping: true });
const sensor_locations = [21035, 20577, 19625, 19121, 18110, 17567, 16501, 16495, 15942, 15347, 15314, 14658, 20506, 20027, 19544, 19044, 18546, 18031, 16957, 16416, 15851, 14574, 13733, 3424, 20501, 19525, 19025, 18527, 18013, 17488, 16962, 16427, 15233, 14578, 13746, 21726, 19982, 18981, 18478, 17427, 16902, 16361, 15793, 15188, 14536, 13691, 3370, 4899, 19446, 18434, 17382, 16856, 16310, 15122, 14465, 13599, 13609, 3291, 4957, 67, 19904, 19910, 18905, 18393, 17877, 17353, 16816, 15694, 15078, 14423, 13547, 3188, 19856, 19363, 18864, 17826, 17297, 17304, 16763, 16218, 15645, 15036, 13503, 3106, 19811, 18812, 18816, 17780, 17249, 16714, 16169, 15595, 14974, 14314, 13405, 21809, 19780, 19282, 18260, 17742, 16671, 15547, 14924, 14254, 2786, 2128, 975, 364, 19732, 18732, 18214, 17161, 16617, 16069, 14873, 13299, 2749, 925, 320, 866, 20624, 20151, 19660, 18656, 17626, 16571, 16015, 15436, 14153, 13250, 2675, 2009, 20658, 20162, 19178, 18174, 17650, 16577, 15458, 14822, 13236, 2678, 2652, 2634]

// ----------------------------------------------------------------------------

function update() {

  const colors = {
    tupleValues: [],
    insertNextTupleValue: (color) => {
      for (let i = 0; i < color.length; i++) {
        colors.tupleValues.push(color[i]);
      }
    },
    getNumberOfComponents: () => {
      return 3;
    },
    getDataType: () => {
      return 'array';
    },
    getNumberOfTuples: () => {
      return colors.tupleValues.length / colors.getNumberOfComponents();
    },
    getData: () => {
      return colors.tupleValues;
    }
  };

  const mapper = vtkMapper.newInstance();
  const actor = vtkActor.newInstance();

  const lookup = vtkLookupTable.newInstance();
  lookup.setNumberOfColors(1024),
  lookup.setRange(0, 1);
  lookup.build();

  mapper.setLookupTable(lookup);
  mapper.setInterpolateScalarsBeforeMapping(true);
  mapper.setUseLookupTableScalarRange(lookup);

  for (let i = 0; i < reader.getOutputData().getPoints().getNumberOfPoints(); i = i + 1) {
    const color = [];

    if (sensor_locations.includes(i)) {
      var x = Math.random();
      color[0] = x
      color[1] = x
      color[2] = x
    }
    else {
      color[0] = null
      color[1] = null
      color[2] = null
    }
    colors.insertNextTupleValue(color);
  }

  reader.getOutputData().getPointData().setScalars(colors);

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


  // ----------------------------------------------------------------------------
  // Standard rendering code setup
  // ----------------------------------------------------------------------------

  const renderWindow = vtkRenderWindow.newInstance();
  const renderer = vtkRenderer.newInstance({ background: [0.2, 0.3, 0.4] });
  renderWindow.addRenderer(renderer);

  // ----------------------------------------------------------------------------
  // Add the actor to the renderer and set the camera based on it
  // ----------------------------------------------------------------------------

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

  // ----------------------------------------------------------------------------
  // Use OpenGL as the backend to view the all this
  // ----------------------------------------------------------------------------

  const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
  renderWindow.addView(openglRenderWindow);

  // ----------------------------------------------------------------------------
  // Create a div section to put this into
  // ----------------------------------------------------------------------------

  const container = document.createElement('div');
  container.style.height = "600px";
  container.style.width = "600px"
  document.querySelector('body').appendChild(container);
  openglRenderWindow.setContainer(container);

  // ----------------------------------------------------------------------------
  // Capture size of the container and set it to the renderWindow
  // ----------------------------------------------------------------------------

  const { width, height } = container.getBoundingClientRect();
  openglRenderWindow.setSize(width, height);


  // ----------------------------------------------------------------------------
  // Setup an interactor to handle mouse events
  // ----------------------------------------------------------------------------

  const interactor = vtkRenderWindowInteractor.newInstance();
  interactor.setView(openglRenderWindow);
  interactor.initialize();
  interactor.bindEvents(container);

  // ----------------------------------------------------------------------------
  // Setup interactor style to use
  // ----------------------------------------------------------------------------

  interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());
  // render();
}

reader.setUrl(`./newpivot.stl`, { binary: true }).then(update);