Heat conduction in a 2D fin, with vtk.js.

To use vtk.js for visualization, two changes are needed compared to the Plotly-based tutorial. First, add a vtk.js import map in the <head> section (instead of loading Plotly):

<script type="importmap">
{
  "imports": {
    "@kitware/vtk.js/": "https://cdn.jsdelivr.net/npm/@kitware/vtk.js@32.12.0/",
    "gl-matrix": "https://esm.sh/v135/gl-matrix@3.4.3",
    "d3-scale": "https://esm.sh/v135/d3-scale@4.0.2",
    "fast-deep-equal": "https://esm.sh/v135/fast-deep-equal@3.1.3",
    "seedrandom": "https://esm.sh/v135/seedrandom@3.0.5",
    "spark-md5": "https://esm.sh/v135/spark-md5",
    "fflate": "https://esm.sh/v135/fflate",
    "utif": "https://esm.sh/v135/utif",
    "webworker-promise": "https://esm.sh/v135/webworker-promise",
    "xmlbuilder2": "https://esm.sh/v135/xmlbuilder2",
    "globalthis": "data:text/javascript,export default function(){return globalThis}"
  }
}
</script>

Second, import plotInterpolatedSolutionVtk, createColorScale, and createContourLineOptions from FEAScript instead of plotSolution, and use them to render the results:

import {
  FEAScriptModel,
  plotInterpolatedSolutionVtk,
  createColorScale,
  createContourLineOptions,
  printVersion,
} from "https://core.feascript.com/dist/feascript.esm.js";

// Steps 1-4 (model, mesh, boundary conditions, solve) are the same as in the Plotly tutorial
const result = model.solve();

// 5. Plot the results with vtk.js
await plotInterpolatedSolutionVtk(model, result, "contour", "resultsCanvas", {
  colorScale: createColorScale({
    presetName: "Cool to Warm",
    scalarBarTitle: "Temperature",
  }),
  contourLines: createContourLineOptions({
    enabled: true,
    numberOfContours: 14,
    lineWidth: 1.25,
  }),
});

The 2D contour plot below shows the computed temperature distribution rendered in real time using FEAScript with vtk.js. The interactive canvas supports pan, zoom, and rotate.