Render into a div container instead of full screen renderer in vtk.js

Web
1

I am trying to render into a div element instead of using the full screen renderer. I found this issue post on github:

I am getting error “Uncaught TypeError: Cannot read property ‘newInstance’ of undefined” on the following line:

var openGlRenderWindow = vtk.Rendering.OpenGL.vtkOpenGLRenderWindow.newInstance();

Here is the code I am currently trying:

var renderWindow = vtk.Rendering.Core.vtkRenderWindow.newInstance();
var renderer = vtk.Rendering.Core.vtkRenderer.newInstance();

// OpenGlRenderWindow
var openGlRenderWindow = vtk.Rendering.OpenGL.vtkOpenGLRenderWindow.newInstance();
renderWindow.addView(openGlRenderWindow);

// Interactor
var interactor = vtk.Rendering.Core.vtkRenderWindowInteractor.newInstance();
interactor.setView(openGlRenderWindow);
interactor.initialize();

renderWindow.addRenderer(renderer);
var actor = vtk.Rendering.Core.vtkActor.newInstance();
var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
actor.setMapper(mapper);

renderer.setLayer(0);
renderer.addActor(actor);
renderer.resetCamera();

var rootContainer = document.getElementById(‘renderwindow’);
openGlRenderWindow.setContainer(rootContainer);
const dims = rootContainer.getBoundingClientRect();
openGlRenderWindow.setSize(dims.width, dims.height);
interactor.bindEvents(rootContainer);
renderWindow.render();

Any help is appreciated.

2

Based on this, you should call vtk.Rendering.OpenGL.vtkRenderWindow.newInstance();

3

That would be the corresponding example using ES6.

4

Thanks again Seb! I am now seeing 3D weather radar in my browser!

1 Like