Create plane source example

floryst · floryst · commit 60d72ae01909 · 2021-04-20T10:51:41.000-04:00
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules
+dist
diff --git a/index.html b/index.html
@@ -9,11 +9,6 @@
   </head>
   <body>
     <h1>Hello World!</h1>
-    We are using Node.js <span id="node-version"></span>,
-    Chromium <span id="chrome-version"></span>,
-    and Electron <span id="electron-version"></span>.
-
-    <!-- You can also require other files to run in this process -->
-    <script src="./renderer.js"></script>
+    <script src="./dist/renderer.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
   "description": "A minimal Electron application",
   "main": "main.js",
   "scripts": {
-    "start": "electron ."
+    "start": "electron .",
+    "build": "webpack --progress"
   },
   "repository": "https://github.com/electron/electron-quick-start",
   "keywords": [
diff --git a/renderer.js b/renderer.js
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,61 @@
+import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkPlaneSource from '@kitware/vtk.js/Filters/Sources/PlaneSource';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import { Representation } from '@kitware/vtk.js/Rendering/Core/Property/Constants';
+
+// import controlPanel from './controlPanel.html';
+
+// ----------------------------------------------------------------------------
+// Standard rendering code setup
+// ----------------------------------------------------------------------------
+
+const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
+  background: [0, 0, 0],
+});
+const renderer = fullScreenRenderer.getRenderer();
+const renderWindow = fullScreenRenderer.getRenderWindow();
+
+// ----------------------------------------------------------------------------
+// Example code
+// ----------------------------------------------------------------------------
+
+const planeSource = vtkPlaneSource.newInstance();
+const mapper = vtkMapper.newInstance();
+const actor = vtkActor.newInstance();
+
+actor.getProperty().setRepresentation(Representation.WIREFRAME);
+
+mapper.setInputConnection(planeSource.getOutputPort());
+actor.setMapper(mapper);
+
+renderer.addActor(actor);
+renderer.resetCamera();
+renderWindow.render();
+
+// -----------------------------------------------------------
+// UI control handling
+// -----------------------------------------------------------
+
+/*
+fullScreenRenderer.addController(controlPanel);
+
+['xResolution', 'yResolution'].forEach((propertyName) => {
+  document.querySelector(`.${propertyName}`).addEventListener('input', (e) => {
+    const value = Number(e.target.value);
+    planeSource.set({ [propertyName]: value });
+    renderWindow.render();
+  });
+});
+*/
+
+// -----------------------------------------------------------
+// Make some variables global so that you can inspect and
+// modify objects in your browser's developer console:
+// -----------------------------------------------------------
+
+global.planeSource = planeSource;
+global.mapper = mapper;
+global.actor = actor;
+global.renderer = renderer;
+global.renderWindow = renderWindow;
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,9 @@
+const path = require('path');
+module.exports = {
+  mode: 'development',
+  // needed to avoid unsafe-eval
+  devtool: 'source-map',
+  output: {
+    filename: 'renderer.js',
+  },
+};
