Hello everyone,
I’m using ParaViewWeb with React and JavaScript. I want to display axes. I would like to know if it’s possible to show the axes. If yes, could you please guide me on how to do it? Below is the code I am using.
function VTKViewer() {
const vtkContainerRef = useRef(null);
const context = useRef(null);
const [representation, setRepresentation] = useState(2);
useEffect(() => {
if (!context.current) {
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
rootContainer: vtkContainerRef.current,
});
const reader = vtkXMLPolyDataReader.newInstance();
reader
.setUrl("assets/file089_state1.vtp", { loadData: true })
.then(() => {
const output = reader.getOutputData(0);
const scalars = output.getPointData().getScalars();
const dataRange = [].concat(scalars ? scalars.getRange() : [0, 1]);
let activeArray = vtkDataArray;
const location = "PointData";
const colorByArrayName = "S";
const newArray =
output[`get${location}`]().getArrayByName(colorByArrayName);
activeArray = newArray;
const newDataRange = activeArray.getRange();
dataRange[0] = newDataRange[0];
dataRange[1] = newDataRange[1];
const lookupTable = vtkColorTransferFunction.newInstance();
lookupTable.setMappingRange(dataRange[0], dataRange[1]);
lookupTable.updateRange();
const mapper = vtkMapper.newInstance();
mapper.set({
colorByArrayName,
colorMode: ColorMode.MAP_SCALARS,
interpolateScalarsBeforeMapping: false,
scalarMode: ScalarMode.USE_POINT_FIELD_DATA,
scalarVisibility: true,
});
mapper.setInputData(output);
let lut = mapper.getLookupTable();
lut.setRange(dataRange[0], dataRange[1]);
lut.setVectorModeToMagnitude();
const actor = vtkActor.newInstance();
actor.setMapper(mapper);
const scalarBarActor = vtkScalarBarActor.newInstance();
const scalarBarActor = vtkScalarBarActor.newInstance();
scalarBarActor.setScalarsToColors(lookupTable);
scalarBarActor.setDrawNanAnnotation(false);
scalarBarActor.setAxisLabel("Von Mises Stress (MPa)");
scalarBarActor.setVisibility(true);
scalarBarActor.setAxisTextStyle({
fontColor: "black",
fontFamily: "Arial",
});
scalarBarActor.setTickTextStyle({
fontColor: "blue",
fontFamily: "Arial",
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
renderer.addActor(scalarBarActor);
renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();
context.current = {
fullScreenRenderer,
renderWindow,
renderer,
actor,
mapper,
};
});
}
return () => {
if (context.current) {
const { fullScreenRenderer, actor, mapper } = context.current;
actor.delete();
mapper.delete();
fullScreenRenderer.delete();
context.current = null;
}
};
}, [vtkContainerRef]);
useEffect(() => {
if (context.current) {
const { actor, renderWindow } = context.current;
actor.getProperty().setRepresentation(representation);
renderWindow.render();
}
}, [representation]);
return (
<div>
<div ref={vtkContainerRef} />
<table
style={{
position: "absolute",
top: "25px",
left: "25px",
background: "white",
padding: "12px",
}}
>
<tbody>
<tr>
<td>
<select
value={representation}
style={{ width: "100%" }}
onChange={(ev) => setRepresentation(Number(ev.target.value))}
>
<option value="0">Points</option>
<option value="1">Wireframe</option>
<option value="2">Surface</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
);
}