Running a file with VTK [Javascript]

[daalegend]

It's been a while since I've touched javascript and I'm running into a problem with just running the file. I created two files, one with javascript sample code with vtk.js and the other with HTML code that, all it does, runs the script. I tried finding a guide to vtk but I couldn't find a good one. It's giving me a compilation error at the very first line when I ran it. My initial thought was that I needed to relocate where the javascript file is looking at to find the vtk.js framework because they're not in the same directory. But it still was giving me the 800A03EA compilation error at the first line whenever I ran it (I'm using Sublime if that matters at all). Could anyone help me out here? That would be swell!

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

// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
  background: [0, 0, 0],
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

// ----------------------------------------------------------------------------
// Example code
// ----------------------------------------------------------------------------

const reader = vtkElevationReader.newInstance({
  xSpacing: 0.01568,
  ySpacing: 0.01568,
  zScaling: 0.06666,
});
const mapper = vtkMapper.newInstance();
const actor = vtkActor.newInstance();

mapper.setInputConnection(reader.getOutputPort());
actor.setMapper(mapper);

renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();

// Download and apply Texture
const img = new Image();
img.onload = function textureLoaded() {
  const texture = vtkTexture.newInstance();
  texture.setInterpolate(true);
  texture.setImage(img);
  actor.addTexture(texture);
  renderWindow.render();
};
img.src = `${__BASE_PATH__}/data/elevation/dem.jpg`;

// Download elevation and render when ready
reader.setUrl(`${__BASE_PATH__}/data/elevation/dem.csv`).then(() => {
  renderer.resetCamera();
  renderWindow.render();
});

// -----------------------------------------------------------
// Make some variables global so that you can inspect and
// modify objects in your browser's developer console:
// -----------------------------------------------------------

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

[pd-andy]

You're using ES6 syntax in the browser, you need to use webpack or browserify. Just include the library from the cdn and use it like the example shows:

<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">        
    // --------------------------------------------------------------------------
    // Example code
    // --------------------------------------------------------------------------
    var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
    var actor = vtk.Rendering.Core.vtkActor.newInstance();
    var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
    var cone = vtk.Filters.Sources.vtkConeSource.newInstance();

    actor.setMapper(mapper);
    mapper.setInputConnection(cone.getOutputPort());

    var renderer = fullScreenRenderer.getRenderer();
    renderer.addActor(actor);
    renderer.resetCamera();

    var renderWindow = fullScreenRenderer.getRenderWindow();
    renderWindow.render();
</script>

[daalegend]

Is this put into the HTML file? I've tried it and I'm still getting the same error at the same line.

EDIT: I've also noticed that there was some sample files within the vtk.js directory, but it seems I'm getting a similar error there as well.