在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.newInstance({
  background: [0, 0, 0]
});
const renderer = fullScreenRenderer.getRenderer();
renderer.addActor(actor);
renderer.resetCamera();
const renderWindow = fullScreenRenderer.getRenderWindow();
renderWindow.render();
 

webpack.config.js內容如下：

const path = require('path');  
const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;  

const entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src'); // 也可用path.resolve(__dirname,'dist')
const outputPath = path.join(__dirname, './dist');

module.exports = {
    mode: 'development',
    // 入口檔案的配置項
    entry,
    // 控制檯報錯資訊
    devtool: 'inline-source-map',
    // 出口檔案的配置項
    output:{
        // 輸出的路徑
        path: outputPath,
        // 輸出的檔名稱
        filename: 'bundle.js'
    },
    // 模組：例如解讀CSS,圖片如何轉換，壓縮
    module: {
        rules: [
            { test: entry, loader: 'expose-loader?app' },
            { test: /\.html$/, loader: 'html-loader' },
        ].concat(vtkRules)
    },
    // 外掛，用於生產模版和各項功能
    plugins:[],
    // 配置webpack開發服務功能
    devServer:{},
    resolve: {
        modules: [
            path.resolve(__dirname, 'node_modules'),
            sourcePath
        ]
    }
}
 

上面第一個module沒有“s”，resolve中的是“modules”！

package.json內容如下：

{
  "name": "vtkjs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "build:release": "webpack -p",
    "start": "webpack-dev-server --content-base ./dist",
    "commit": "git cz",
    "semantic-release": "semantic-release"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vtk.js": "^6.4.22"
  },
  "devDependencies": {
    "kw-web-suite": "^6.0.2"
  }
}
 

執行npm run build命令，cd到dist資料夾下，執行http-server（需先npm install http-server或用webpack dev-server），開啟http://127.0.0.1:8080/，黑屏。

2、原因分析及改進

img.onload及reader.setUrl中使用回撥函式，當renderWindow.render()執行完成後圖片及深度資訊才載入完畢，而未被視窗渲染，因此應在img.onload()和reader.setUrl().then()中新增視窗渲染並將fullScreenRenderer、renderer和renderWindow的宣告前移，修改如下。

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 fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
  background: [0, 0, 0]
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

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

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

const mapper = vtkMapper.newInstance();
mapper.setInputConnection(reader.getOutputPort());
const actor = vtkActor.newInstance();
actor.setMapper(mapper);
renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();

3、在瀏覽器console中檢視及修改

當試圖在瀏覽器console中修改actor資訊時，報錯如下。

解決辦法是在index.js檔案的最後附加以下程式碼，即可在console中檢視或修改相應的屬性。

global.reader = reader;
global.mapper = mapper;
global.actor = actor;
global.renderer = renderer;
global.renderWindow = renderWindow;

，具體步驟為：

step1 新建資料夾，cmd輸入git clone [email protected]:orangecsy/vtkjs-exercise.git，cd 2進入資料夾2；

step2 cmd輸入npm run build；

step3 cd dist進入dist資料夾，cmd中輸入http-server（需先npm install http-server）或使用webpack配置開發伺服器；

step4 瀏覽器中輸入http://127.0.0.1:8080/，即為結果。