vtk.js No input error

Web
14

Solution

The issue was that you were still instantiating the fullscreen view that was hiding the other one?

<!DOCTYPE html>
<html>

<body>
	<script type="text/javascript" src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"></script>
	<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
		var vtkOpenGLRenderWindow = vtk.Rendering.OpenGL.vtkRenderWindow;
		var vtkRenderWindow = vtk.Rendering.Core.vtkRenderWindow;
		var vtkRenderWindowInteractor = vtk.Rendering.Core.vtkRenderWindowInteractor;
		var vtkRenderer = vtk.Rendering.Core.vtkRenderer;
		var vtkInteractorStyleTrackballCamera = vtk.Interaction.Style.vtkInteractorStyleTrackballCamera;

		// var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance()
		var ofun = vtk.Common.DataModel.vtkPiecewiseFunction.newInstance();
		var ctfun = vtk.Rendering.Core.vtkColorTransferFunction.newInstance();
		var actor = vtk.Rendering.Core.vtkVolume.newInstance();
		var mapper = vtk.Rendering.Core.vtkVolumeMapper.newInstance();
		var xmlImageDataReader = vtk.IO.XML.vtkXMLImageDataReader.newInstance();

		// var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance({
		//     background: [0.3, 0.3, 0.3],
		// });

		// var renderer = fullScreenRenderer.getRenderer();
		// var renderWindow = fullScreenRenderer.getRenderWindow();


var renderWindow = vtkRenderWindow.newInstance();
var renderer = vtkRenderer.newInstance({ background: [0.2, 0.3, 0.4] });
renderWindow.addRenderer(renderer);

// ----------------------------------------------------------------------------
// Use OpenGL as the backend to view the all this
// ----------------------------------------------------------------------------

var openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
renderWindow.addView(openglRenderWindow);

// ----------------------------------------------------------------------------
// Create a div section to put this into
// ----------------------------------------------------------------------------

var container = document.createElement('div');
container.style.width = '300px';
container.style.height = '300px';
document.querySelector('body').appendChild(container);
openglRenderWindow.setContainer(container);

// ----------------------------------------------------------------------------
// Capture size of the container and set it to the renderWindow
// ----------------------------------------------------------------------------

var { width, height } = container.getBoundingClientRect();
openglRenderWindow.setSize(width, height);

// ----------------------------------------------------------------------------
// Setup an interactor to handle mouse events
// ----------------------------------------------------------------------------

var interactor = vtkRenderWindowInteractor.newInstance();
interactor.setView(openglRenderWindow);
interactor.initialize();
interactor.bindEvents(container);

// ----------------------------------------------------------------------------
// Setup interactor style to use
// ----------------------------------------------------------------------------

interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance());

// ----------------------------------------------------------------------------

		
		
		mapper.setSampleDistance(1.3);
		actor.setMapper(mapper);

		ofun.addPoint(-3024, 0.1);
		ofun.addPoint(-637.62, 0.1);
		ofun.addPoint(700, 0.5);
		ofun.addPoint(3071, 0.9);

		ctfun.addRGBPoint(0, 0, 0, 0);
		ctfun.addRGBPoint(255, 1.0, 1.0, 1.0);

		actor.getProperty().setRGBTransferFunction(0, ctfun);
		actor.getProperty().setInterpolationTypeToLinear();
		actor.getProperty().setIndependentComponents(0);

		mapper.setInputConnection(xmlImageDataReader.getOutputPort());
		xmlImageDataReader.setUrl('test2.vti').then(() => {
			xmlImageDataReader.loadData().then(() => {
				renderer.addVolume(actor);
				const interactor = renderWindow.getInteractor();
				interactor.setDesiredUpdateRate(15.0);
				console.log(interactor);
				renderer.resetCamera();
				renderer.getActiveCamera().elevation(-70);
				renderWindow.render();
				
			});
		});
		
	</script>

</body>

</html>