Skip to content

Commit fe0008d

Browse files
dakerfloryst
daker
authored and
floryst
committed
docs(importmaps): use importmaps for external script
1 parent c66c918 commit fe0008d

File tree

4 files changed

+63
-50
lines changed

4 files changed

+63
-50
lines changed

‎Documentation/content/docs/intro_vtk_as_external_script.md

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,42 @@
11
title: Importing vtk.js as an external script
22
---
33

4-
This guide illustrates how to build an application using vtk.js as a pre-built script file. This is not the recommended way of building vtk.js applications but enables quick prototyping and easy access without any tools or infrastructure needed.
4+
This guide illustrates how to build a vtk.js application by leveraging import maps. While this approach may require a modern browser that supports import maps, it offers a cleaner setup and gives you fine-grained control over which modules are imported.
55

6-
Below you can find an [html](https://raw.githubusercontent.com/Kitware/vtk-js/master/Documentation/content/docs/vtk-js-demo.html) file example that leverages vtk.js and builds a visualization with it. You can see its ES6 example counter part [here](https://kitware.github.io/vtk-js/examples/ConeSource.html).
6+
Below you can find an [HTML](https://raw.githubusercontent.com/Kitware/vtk-js/master/Documentation/content/docs/vtk-js-demo.html) file example that demonstrates how to use vtk.js with import maps to create a visualization.
77

88
```html vtk-js-demo.html
99
<!DOCTYPE html>
1010
<html>
11-
<body>
12-
<script type="text/javascript" src="https://unpkg.com/@babel/[email protected]/dist/polyfill.js"></script>
13-
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
14-
<script type="text/javascript">
15-
// --------------------------------------------------------------------------
16-
// Example code
17-
// --------------------------------------------------------------------------
18-
var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
19-
var actor = vtk.Rendering.Core.vtkActor.newInstance();
20-
var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
21-
var cone = vtk.Filters.Sources.vtkConeSource.newInstance();
22-
23-
actor.setMapper(mapper);
24-
mapper.setInputConnection(cone.getOutputPort());
25-
26-
var renderer = fullScreenRenderer.getRenderer();
27-
renderer.addActor(actor);
28-
renderer.resetCamera();
29-
30-
var renderWindow = fullScreenRenderer.getRenderWindow();
31-
renderWindow.render();
32-
</script>
33-
</body>
11+
<body>
12+
<script type="importmap">
13+
{
14+
"imports": {
15+
"@kitware/vtk.js/": "https://cdn.skypack.dev/@kitware/vtk.js/"
16+
}
17+
}
18+
</script>
19+
<script type="module">
20+
import '@kitware/vtk.js/Rendering/Profiles/Geometry';
21+
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
22+
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
23+
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
24+
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
25+
// --------------------------------------------------------------------------
26+
// Example code
27+
// --------------------------------------------------------------------------
28+
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
29+
const actor = vtkActor.newInstance();
30+
const mapper = vtkMapper.newInstance();
31+
const cone = vtkConeSource.newInstance();
32+
actor.setMapper(mapper);
33+
mapper.setInputConnection(cone.getOutputPort());
34+
const renderer = fullScreenRenderer.getRenderer();
35+
renderer.addActor(actor);
36+
renderer.resetCamera();
37+
const renderWindow = fullScreenRenderer.getRenderWindow();
38+
renderWindow.render();
39+
</script>
40+
</body>
3441
</html>
3542
```

‎Documentation/content/docs/vtk-js-demo.html

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
11
<!DOCTYPE html>
22
<html>
3-
<body>
4-
<script type="text/javascript" src="https://unpkg.com/@babel/[email protected]/dist/polyfill.js"></script>
5-
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
6-
<script type="text/javascript">
7-
// --------------------------------------------------------------------------
8-
// Example code
9-
// --------------------------------------------------------------------------
10-
var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
11-
var actor = vtk.Rendering.Core.vtkActor.newInstance();
12-
var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
13-
var cone = vtk.Filters.Sources.vtkConeSource.newInstance();
14-
15-
actor.setMapper(mapper);
16-
mapper.setInputConnection(cone.getOutputPort());
17-
18-
var renderer = fullScreenRenderer.getRenderer();
19-
renderer.addActor(actor);
20-
renderer.resetCamera();
21-
22-
var renderWindow = fullScreenRenderer.getRenderWindow();
23-
renderWindow.render();
24-
</script>
25-
</body>
3+
<body>
4+
<script type="importmap">
5+
{
6+
"imports": {
7+
"@kitware/vtk.js/": "https://cdn.skypack.dev/@kitware/vtk.js/"
8+
}
9+
}
10+
</script>
11+
<script type="module">
12+
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
13+
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
14+
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
15+
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
16+
// --------------------------------------------------------------------------
17+
// Example code
18+
// --------------------------------------------------------------------------
19+
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
20+
const actor = vtkActor.newInstance();
21+
const mapper = vtkMapper.newInstance();
22+
const cone = vtkConeSource.newInstance();
23+
actor.setMapper(mapper);
24+
mapper.setInputConnection(cone.getOutputPort());
25+
const renderer = fullScreenRenderer.getRenderer();
26+
renderer.addActor(actor);
27+
renderer.resetCamera();
28+
const renderWindow = fullScreenRenderer.getRenderWindow();
29+
renderWindow.render();
30+
</script>
31+
</body>
2632
</html>

‎Examples/Volume/VolumeMapperParallelProjection/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ fullScreenRenderer.addController(controlPanel);
3939
// ----------------------------------------------------------------------------
4040

4141
// SETUP ================
42-
// Load script from https://unpkg.com/vtk.js then...
42+
// Load script from https://cdn.skypack.dev/@kitware/vtk.js then...
4343

4444
const cubeSource = vtkCubeSource.newInstance();
4545

‎Examples/Volume/VolumeRenderingWithPolyData/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ fullScreenRenderer.addController(controlPanel);
4141
// ----------------------------------------------------------------------------
4242

4343
// SETUP ================
44-
// Load script from https://unpkg.com/vtk.js then...
44+
// Load script from https://cdn.skypack.dev/@kitware/vtk.js then...
4545

4646
const clipPlane1 = vtkPlane.newInstance();
4747
const clipPlane2 = vtkPlane.newInstance();

0 commit comments

Comments
 (0)