Published
Edited
Apr 17, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
image = {
const { renderer, renderWindow, interactor } = renderWindowSetup(container)
renderWindow.render()

return {renderer, renderWindow, interactor}
}
Insert cell
Insert cell
renderWindowSetup = (container) => {
// Standard rendering code setup
const renderWindow = vtk.RenderWindow.newInstance();
const renderer = vtk.Renderer.newInstance({});
renderer.setBackgroundFrom([0.75, 0.75, 0.75, 1.0]);

renderWindow.addRenderer(renderer);

// Use OpenGL as the backend to view the all this
const openglRenderWindow = vtk.OpenGLRenderWindow.newInstance();
renderWindow.addView(openglRenderWindow);

openglRenderWindow.setContainer(container);

// Capture size of the container and set it to the renderWindow
const { width, height } = container.getBoundingClientRect();
console.log('width: ', width, ', height: ', height)
openglRenderWindow.setSize(width, height);

// Setup an interactor to handle mouse events
const interactor = vtk.RenderWindowInteractor.newInstance();
interactor.setInteractorStyle(
vtk.InteractorStyleTrackballCamera.newInstance()
);
interactor.setView(openglRenderWindow);
interactor.initialize();
interactor.bindEvents(container);

return { renderer, renderWindow, interactor };
};
Insert cell
Insert cell
{
const dataAccessHelper = vtk.DataAccessHelper.get("zip", {
zipContent: await file.arrayBuffer(),
callback: (zip) => {
const sceneImporter = vtk.HTTPSceneLoader.newInstance({
renderer: image.renderer,
dataAccessHelper
})

sceneImporter.setUrl("index.json")
sceneImporter.onReady(() => {
let scene = sceneImporter.getScene()
image.renderer.resetCamera()
image.renderWindow.render()
})
}
})
}
Insert cell
Insert cell
### Load vtk.js Module
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more