the mapping between the scalar values and the color representation is not occurring.

Web
1

I am new to this library. I have .vtp file containing more than one scalar fields. Additionally, the code visualizes a 3D file, and the scalar bar updates based on the .vtp file’s scalar values. It is working fine.

Problem: The 3D color contour plot is not visible; the mapping between the scalar values and the color representation is not occurring. It shows simple gray model. I require assistance in resolving this issue.

import React, { useEffect, useRef } from ‘react’;
import ‘@kitware/vtk.js/favicon’;
import ‘@kitware/vtk.js/Rendering/Profiles/Geometry’;
import ‘@kitware/vtk.js/Rendering/Profiles/Glyph’;
import vtkFullScreenRenderWindow from ‘@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow’;
import vtkXMLPolyDataReader from ‘@kitware/vtk.js/IO/XML/XMLPolyDataReader’;
import vtkActor from ‘@kitware/vtk.js/Rendering/Core/Actor’;
import vtkLookupTable from ‘@kitware/vtk.js/Common/Core/LookupTable’;
import vtkMapper from ‘@kitware/vtk.js/Rendering/Core/Mapper’;
import vtkScalarBarActor from ‘@kitware/vtk.js/Rendering/Core/ScalarBarActor’;

const { ColorMode, ScalarMode } = vtkMapper;

function App() {
const containerRef = useRef(null);

useEffect(() => {
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
background: [0.9, 0.9, 0.9],
rootContainer: containerRef.current,
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

const lookupTable = vtkLookupTable.newInstance({ hueRange: [0.666, 0] });
const reader = vtkXMLPolyDataReader.newInstance();

reader.setUrl('/file.vtp', { loadData: true }).then(() => {
  const data = reader.getOutputData();
  const pointData = data.getPointData();
  const displacementArray = pointData.getArrayByName('displacement_1.s');

  if (!displacementArray) {
    console.error('Scalar array "displacement_1.s" not found in file.vtp');
    return;
  }

  const scalarRange = displacementArray.getRange();
  console.log("Scalar Range:", scalarRange);

  lookupTable.setMappingRange(scalarRange);
  lookupTable.build();

  const mapper = vtkMapper.newInstance({
    interpolateScalarsBeforeMapping: true,
    colorMode: ColorMode.MAP_SCALARS,
    scalarMode: ScalarMode.USE_POINT_FIELD_DATA,
    scalarVisibility: true, // Correct place to set scalar visibility
    scalarRange: scalarRange,
    useLookupTableScalarRange: false,
    lookupTable,
    scalarMaterialMode: 1,
  });

  const actor = vtkActor.newInstance();
  actor.getProperty().setEdgeVisibility(false);

  const scalarBarActor = vtkScalarBarActor.newInstance();
  scalarBarActor.setScalarsToColors(lookupTable);
  renderer.addActor(scalarBarActor);

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

  renderer.resetCamera();
  renderWindow.render();

  return () => {
    fullScreenRenderer.delete();
    reader.delete();
  };
}).catch((error) => {
  console.error('Error loading file.vtp:', error);
});

}, );

return (
<div ref={containerRef} style={{ width: ‘100%’, height: ‘80vh’ }} />
);
}

export default App;

2

Did you try your VTP with the GeometryViewer example ?
If it works you can look at the code of the example.

HTH,
Julien.