disaster/src/components/HelloWorld.vue

<template>
  <div>
    <div ref="vtkContainer" />
   
  </div>
</template>

<script>
import * as d3 from 'd3-scale';
import { formatDefaultLocale } from 'd3-format';
import { onMounted } from 'vue';
import '@kitware/vtk.js/Rendering/Profiles/Geometry';
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkActor           from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper          from '@kitware/vtk.js/Rendering/Core/Mapper';
import vtkUnstructuredDataReader from '../reader/UnstructuredDataReader.js';
import vtkScalarBarActor from '@kitware/vtk.js/Rendering/Core/ScalarBarActor';
import vtkLookupTable from '@kitware/vtk.js/Common/Core/LookupTable';
import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray.js';
import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';

export default {
  name: 'HelloWorld',
  //体制
  setup() {
    //安装时
    onMounted(() => {
     const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
      const renderer = fullScreenRenderer.getRenderer();
      const renderWindow = fullScreenRenderer.getRenderWindow();

      const resetCamera = renderer.resetCamera;
      const render = renderWindow.render;
              
      const mapper = vtkMapper.newInstance();
      const actor = vtkActor.newInstance();
      const reader = vtkUnstructuredDataReader.newInstance();
      const scalarName ="Pressure";
      
      var scalars;
      reader.setUrl('data/Fire/POST0.vtk').then(() => {
          const polydata = reader.getOutputData(0);        
           scalars = reader.getOutputData(1);    
          const scalarArray=scalars.get(scalarName);
          const dataArray = vtkDataArray.newInstance({
            name:scalarName,
            size:polydata.getNumberOfPoints()
          });
          dataArray.setData(scalarArray);
          polydata.getPointData().setScalars(dataArray); 
          actor.setMapper(mapper);
          mapper.setInputData(polydata);
          renderer.addActor(actor);
          let lut = mapper.getLookupTable();
          const scalarBarActor = vtkScalarBarActor.newInstance();
          renderer.addActor(scalarBarActor);
          scalarBarActor.setScalarsToColors(lut);
          console.log("lut:",lut.getRange());    
          // Change the number of ticks (TODO: add numberOfTicks to ScalarBarActor)
          function generateTicks(numberOfTicks) {
            return (helper) => {
              const lastTickBounds = helper.getLastTickBounds();
              // compute tick marks for axes
              const scale = d3
                .scaleLinear()
                .domain([0.0, 1.0])
                .range([lastTickBounds[0], lastTickBounds[1]]);
              const samples = scale.ticks(numberOfTicks);
              const ticks = samples.map((tick) => scale(tick));
              // Replace minus "\u2212" with hyphen-minus "\u002D" so that parseFloat() works
              formatDefaultLocale({ minus: '\u002D' });
              const format = scale.tickFormat(
                ticks[0],
                ticks[ticks.length - 1],
                numberOfTicks
              );
              const tickStrings = ticks
                .map(format)
                .map((tick) => Number(parseFloat(tick).toPrecision(12)).toPrecision()); // d3 sometimes adds unwanted whitespace
              helper.setTicks(ticks);
              helper.setTickStrings(tickStrings);
           };     
          }
          scalarBarActor.setGenerateTicks(generateTicks(5));
          scalarBarActor.setAxisLabel(scalarName);
          scalarBarActor.setDrawAboveRangeSwatch(true);
          const ctf = vtkColorTransferFunction.newInstance();
          ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
          ctf.addRGBPoint(1.0, 1.0, 0.0, 0.0);

          mapper.setLookupTable(ctf);
          lut = mapper.getLookupTable();
          scalarBarActor.setScalarsToColors(lut);
          resetCamera();
          render();

        for (let index = 1; index <= 60; index++) {
          var flag =true;
          while(flag){
            flag=false;
              const reader = vtkUnstructuredDataReader.newInstance();
              reader.setUrl('data/Fire/POST'+index+'.vtk').then(() => {
                console.log("index:",index);
                const polydata = mapper.getInputData();    
                // console.log("polydata:",polydata);
                const scalars = reader.getOutputData(1);
                // console.log("scalars:",scalars);        
                const scalarArray=scalars.get(scalarName);
                  // console.log("polydata.getNumberOfPoints():",polydata.getNumberOfPoints());        
                const dataArray = vtkDataArray.newInstance({
                  name:scalarName,
                  size:polydata.getNumberOfPoints()
                });
                dataArray.setData(scalarArray);
                polydata.getPointData().setScalars(dataArray); 
                // mapper.setInputData(polydata);
                renderWindow.render();
                flag=true;
              });
          }  
        }
    
      });
     

      renderWindow.render();


      



    });
    return ;
  }
}
</script>

<style scoped>
.controls {
  position: absolute;
  top: 25px;
  left: 25px;
  background: white;
  padding: 12px;
}
</style>