<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" style="display:none;"><!-- P {margin-top:0;margin-bottom:0;} --></style>
</head>
<body dir="ltr">
<div id="divtagdefaultwrapper" style="font-size:12pt;color:#000000;font-family:Calibri,Helvetica,sans-serif;" dir="ltr">
<p style="margin-top:0;margin-bottom:0"><b>Hello I would like some help or link to resources, because I have followed the introduction guide:
</b><a href="https://kitware.github.io/vtk-js/docs/develop_requirement.html" class="OWAAutoLink" id="LPlnk489984" previewremoved="true">https://kitware.github.io/vtk-js/docs/develop_requirement.html</a> to install vtk, node and git.</p>
<p style="margin-top:0;margin-bottom:0"><br>
</p>
<p style="margin-top:0;margin-bottom:0">I have been trying to integrate into a React aplication, and it outputs:</p>
<p style="margin-top:0;margin-bottom:0"><br>
</p>
<p style="margin-top:0;margin-bottom:0"></p>
<div style="font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; font-size: 2em; font-family: sans-serif; color: rgb(206, 17, 38); margin: 0px 2rem 0.75rem 0px; flex: 0 0 auto; max-height: 50%; overflow: auto;">
Failed to compile</div>
<a style="color: rgb(41, 50, 56); font-family: Consolas, Menlo, monospace; font-size: 11px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">
<pre style="display: block; padding: 0.5em; margin-top: 0.5em; margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05);"><code style="font-family: Consolas, Menlo, monospace;"><span data-ansi-line="true"><span>./node_modules/vtk.js/Sources/Rendering/OpenGL/Texture/index.js</span></span><br><span data-ansi-line="true"><span>1126:25-47 "export 'default' (imported as 'ComputeGradientsWorker') was not found in './ComputeGradients.worker'</span></span></code></pre>
</a>
<p></p>
<p style="margin-top:0;margin-bottom:0"><br>
</p>
<p style="margin-top:0;margin-bottom:0">I just have used the code in: <a href="https://kitware.github.io/vtk-js/examples/PolyDataReader.html" class="OWAAutoLink" id="LPlnk265988" previewremoved="true">
https://kitware.github.io/vtk-js/examples/PolyDataReader.html</a></p>
<p style="margin-top:0;margin-bottom:0"><br>
</p>
<p style="margin-top:0;margin-bottom:0">In addition if I go to the previous file and deep into ./ComputedGradients.worker, I navigate well to ComputeGradients.worker.js.</p>
<p style="margin-top:0;margin-bottom:0"><br>
</p>
<p style="margin-top:0;margin-bottom:0"><br>
</p>
<p style="margin-top:0;margin-bottom:0">Do I need other requirement to execute the aplication? I am using a node server.</p>
<p style="margin-top:0;margin-bottom:0"><br>
</p>
<p style="margin-top:0;margin-bottom:0">In addition I have written the code as React code:</p>
<p style="margin-top:0;margin-bottom:0"><br>
</p>
<p style="margin-top:0;margin-bottom:0"></p>
<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'Courier New';font-size:9,0pt;"><span style="color:#cc7832;font-weight:bold;">import </span>React <span style="color:#cc7832;font-weight:bold;">from </span><span style="color:#6a8759;">'react'</span><span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;font-weight:bold;">import </span>vtkActor <span style="color:#cc7832;font-weight:bold;">from </span><span style="color:#6a8759;">'vtk.js/Sources/Rendering/Core/Actor'</span><span style="color:#cc7832;">;<br></span><span style="color:#cc7832;font-weight:bold;">import </span>vtkFullScreenRenderWindow <span style="color:#cc7832;font-weight:bold;">from </span><span style="color:#6a8759;">'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index'</span><span style="color:#cc7832;">;<br></span><span style="color:#cc7832;font-weight:bold;">import </span>vtkMapper <span style="color:#cc7832;font-weight:bold;">from </span><span style="color:#6a8759;">'vtk.js/Sources/Rendering/Core/Mapper'</span><span style="color:#cc7832;">;<br></span><span style="color:#cc7832;font-weight:bold;">import </span>vtkPolyDataReader <span style="color:#cc7832;font-weight:bold;">from </span><span style="color:#6a8759;">'vtk.js/Sources/IO/Legacy/PolyDataReader'</span><span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;font-weight:bold;">class </span>LoadVTK <span style="color:#cc7832;font-weight:bold;">extends </span>React.Component() {<br> <span style="color:#ffc66d;">render</span>() {<br> <span style="color:#cc7832;font-weight:bold;">const </span>fullScreenRenderer = vtkFullScreenRenderWindow.newInstance()<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span><span style="color:#cc7832;font-weight:bold;">const </span>renderer = fullScreenRenderer.getRenderer()<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span><span style="color:#cc7832;font-weight:bold;">const </span>renderWindow = fullScreenRenderer.getRenderWindow()<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;"> </span><span style="color:#cc7832;font-weight:bold;">const </span>resetCamera = renderer.resetCamera<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span><span style="color:#cc7832;font-weight:bold;">const </span>render = renderWindow.<span style="color:#9876aa;">render</span><span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;"> </span><span style="color:#cc7832;font-weight:bold;">const </span>reader = vtkPolyDataReader.newInstance()<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span>reader.setUrl(<span style="color:#6a8759;">`C:</span><span style="color:#cc7832;">\U</span><span style="color:#6a8759;">sers</span><span style="color:#cc7832;">\Y</span><span style="color:#6a8759;">onePC</span><span style="color:#cc7832;">\W</span><span style="color:#6a8759;">ebstormProjects</span><span style="color:#cc7832;">\p</span><span style="color:#6a8759;">rototipo</span><span style="color:#cc7832;">\s</span><span style="color:#6a8759;">rc</span><span style="color:#cc7832;">\c</span><span style="color:#6a8759;">omponents</span><span style="color:#cc7832;">\a</span><span style="color:#6a8759;">nimals</span><span style="color:#cc7832;">\c</span><span style="color:#6a8759;">abezasegmentado02.vtk`</span>).<span style="color:#ffc66d;">then</span>(() => {<br> <span style="color:#cc7832;font-weight:bold;">const </span>polydata = reader.getOutputData(<span style="color:#6897bb;">0</span>)<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span><span style="color:#cc7832;font-weight:bold;">const </span>mapper = vtkMapper.newInstance()<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span><span style="color:#cc7832;font-weight:bold;">const </span>actor = vtkActor.newInstance()<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;"> </span>actor.setMapper(mapper)<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span>mapper.setInputData(polydata)<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;"> </span>renderer.addActor(actor)<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;"> </span>resetCamera()<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"> </span>render()<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;"> </span>})<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;"> </span><span style="color:#cc7832;font-weight:bold;">return </span>(<br> <span style="color:#e8bf6a;"><div></div><br></span><span style="color:#e8bf6a;"> </span>)<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span><span style="color:#cc7832;"> </span>}<br>}<br><br><span style="color:#cc7832;font-weight:bold;">export default </span>LoadVTK<span style="color:#cc7832;">;<br></span><span style="color:#cc7832;"><br></span></pre>
<p></p>
<p style="margin-top:0;margin-bottom:0"><br>
</p>
<p style="margin-top:0;margin-bottom:0">And I have used it from the main page as:
</p>
<pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'Courier New';font-size:9,0pt;"><span style="color:#e8bf6a;"><LoadVTK/></span></pre>
<p></p>
<p style="margin-top:0;margin-bottom:0"><br>
</p>
<p style="margin-top:0;margin-bottom:0"><b>Could you help me please?</b><br>
</p>
</div>
<br>
<p><span style="color:rgb(75, 165, 36);">Antes de imprimir este correo electrónico, piense bien si es necesario hacerlo: el medio ambiente es una cuestión de todos.</span>
</p>
<p><span style="color:rgb(75, 165, 36);">Please consider the environment before printing this email.</span></p>
</body>
</html>