2c:null 2d:["$","title",null,{"children":"Using VTK.js in Observable | Nicolas Schmidt | Observable"}] 32:T42e,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 }; };33:[{"id":"1bf151ab48e510cf31a186e04fd9db34289291b72963a491df537d3c8921732d98d4d26b54127ccdfd3879ee60068c789597cdf9825528752d501ca9d416dfa7","href":"https://static.observableusercontent.com/files/1bf151ab48e510cf31a186e04fd9db34289291b72963a491df537d3c8921732d98d4d26b54127ccdfd3879ee60068c789597cdf9825528752d501ca9d416dfa7","name":"171210AISC_Sculpture_brep (1).vtkjs","type":"application/zip","lastModified":1634083173796.085,"size":184729}] 30:{"id":"2fcc22dea33cc7df","slug":"vtkjs-in-observable","title":"Using VTK.js in Observable","thumbnail":"295d273c519a8eaa5d36209f124c703925a4b3d0687abdec01e74d2bc2f9fb2d","access_level":"public","create_time":"$D2021-10-06T12:41:53.325Z","update_time":"$D2022-08-10T13:10:40.153Z","view_time":null,"first_public_time":"$D2021-10-06T13:07:14.708Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"57799c7dfb47a7cc","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":"starter_2024"},"version":115,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"56ee54164d4582ce","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":null}],"members":[{"type":"individual","id":"56ee54164d4582ce","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Using VTK.js in Observable","cells":[{"id":0,"value":"# Using VTK.js in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Vtk.js is an open source javascript library for manipulating and rendering scientific data built on the Visualization Toolkit (VTK) by Kitware. This notebook demonstrates how to use it in an Observable notebook.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"For usage of vtkjs in React check this codesandbox.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"Load a .vtkjs scene file. Find more .vtkjs files here.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof file = localFileInput({accept: \".3dm,.vtkjs\", value: FileAttachment(\"171210AISC_Sculpture_brep (1).vtkjs\")})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"container = {\n const container = DOM.element('div')\n container.style.width = '100%'\n container.style.height = 600 + 'px'\n\n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Create the image and expose the renderer, renderWindow and interactor objects","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"image = {\n const { renderer, renderWindow, interactor } = renderWindowSetup(container)\n \n renderWindow.render()\n\n return {renderer, renderWindow, interactor}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"Set up the render window.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"Load the file.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"loaded = {\n const dataAccessHelper = vtk.DataAccessHelper.get(\"zip\", {\n zipContent: await file.arrayBuffer(),\n callback: (zip) => {\n const sceneImporter = vtk.HTTPSceneLoader.newInstance({\n renderer: image.renderer,\n dataAccessHelper\n })\n\n sceneImporter.setUrl(\"index.json\")\n sceneImporter.onReady(() => {\n let scene = sceneImporter.getScene()\n \n image.renderer.resetCamera()\n image.renderWindow.render()\n })\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"