在angular cli应用程序中使用vtk.js / glsl文件

npm install vtk.js glslify-loader --save

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.glsl$/,
        use: 'glslify-loader'
      }
    ]
  }
};

import vtk from 'vtk.js';
import vertexShader from './path/to/vertexShader.glsl';
import fragmentShader from './path/to/fragmentShader.glsl';

// 创建vtk渲染器
const renderer = vtk.Rendering.Core.vtkRenderer.newInstance();

// 加载vtk数据
const reader = vtk.IO.Core.vtkXMLPolyDataReader.newInstance();
reader.setUrl('path/to/vtkData.vtp', { binary: true }).then(() => {
  const polyData = reader.getOutputData(0);

  // 创建vtk mapper
  const mapper = vtk.Rendering.Core.vtkMapper.newInstance();
  mapper.setInputData(polyData);

  // 创建vtk actor
  const actor = vtk.Rendering.Core.vtkActor.newInstance();
  actor.setMapper(mapper);

  // 将actor添加到渲染器中
  renderer.addActor(actor);

  // 渲染场景
  renderer.resetCamera();
  renderer.getActiveCamera().elevation(45);
  renderer.getActiveCamera().azimuth(45);
  renderer.resetCameraClippingRange();
  renderer.resetCamera();

  // 渲染器添加到页面中
  const container = document.getElementById('vtkContainer');
  vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
    container,
    background: [0, 0, 0],
    rootContainer: container,
    size: [800, 600],
    renderer,
  });
});