【vtk.js学习笔记（2）】绘制纹理深度图

在vtk.js学习笔记（1）中搭建好了vtk.js的开发环境，并绘制了一个圆锥，这篇笔记将通过绘制一个带深度信息的纹理图继续学习vtk.js，实际效果如下图所示。

1、通过vtkElevationReader实现带深度信息的纹理映射

import vtkTexture from 'vtk.js/Sources/Rendering/Core/Texture';
import vtkElevationReader from 'vtk.js/Sources/IO/Misc/ElevationReader';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';

const img = new Image();
img.onload = function() {
  const texture = vtkTexture.newInstance();
  texture.setInterpolate(true);
  texture.setImage(img);
  actor.addTexture(texture);
};
img.src = `./img/dem.jpg`;

const reader = vtkElevationReader.newInstance({
  xSpacing: 0.01568,
  ySpacing: 0.01568,
  zScaling: 0.06666,
});
reader.setUrl(`./img/dem.csv`);

const mapper = vtkMapper.newInstance();
mapper.setInputConnection(reader.getOutputPort());
const actor = vtkActor.newInstance();
actor.setMapper(mapper);
const fullScreenRenderer = vtkFullScreenRenderWindow.newI