30: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 }; };31:[{"id":"1bf151ab48e510cf31a186e04fd9db34289291b72963a491df537d3c8921732d98d4d26b54127ccdfd3879ee60068c789597cdf9825528752d501ca9d416dfa7","href":"https://static.observableusercontent.com/files/1bf151ab48e510cf31a186e04fd9db34289291b72963a491df537d3c8921732d98d4d26b54127ccdfd3879ee60068c789597cdf9825528752d501ca9d416dfa7","name":"171210AISC_Sculpture_brep (1).vtkjs","type":"application/zip","lastModified":1634083173796.085,"size":184729}] 2e:{"title":"Using VTK.js in Observable","cells":[{"id":0,"value":"# Using VTK.js in Observable","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":68,"value":"For usage of vtkjs in React check this codesandbox.","pinned":false,"hidden":false,"mode":"html"},{"id":47,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":59,"value":"Load a .vtkjs scene file. Find more .vtkjs files here.","pinned":false,"hidden":false,"mode":"html"},{"id":31,"value":"viewof file = localFileInput({accept: \".3dm,.vtkjs\", value: FileAttachment(\"171210AISC_Sculpture_brep (1).vtkjs\")})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":74,"value":"Create the image and expose the renderer, renderWindow and interactor objects","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":87,"value":"Set up the render window.","pinned":false,"hidden":false,"mode":"html"},{"id":36,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"Load the file.","pinned":false,"hidden":false,"mode":"html"},{"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"},{"id":13,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":10,"value":"### Load vtk.js Module","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"Load vtkjs and expose deeply nested vtkjs imports.","pinned":false,"hidden":false,"mode":"html"},{"id":6,"value":"vtk = ({\n RenderWindow : vtkjs.Rendering.Core.vtkRenderWindow,\n Renderer : vtkjs.Rendering.Core.vtkRenderer,\n OpenGLRenderWindow: vtkjs.Rendering.OpenGL.vtkRenderWindow,\n RenderWindowInteractor: vtkjs.Rendering.Core.vtkRenderWindowInteractor,\n InteractorStyleTrackballCamera: vtkjs.Interaction.Style.vtkInteractorStyleTrackballCamera,\n DataAccessHelper : vtkjs.IO.Core.DataAccessHelper,\n HTTPSceneLoader : vtkjs.IO.Core.vtkHttpSceneLoader,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"vtkjs = {\n await import('https://cdn.skypack.dev/vtk.js@24.5.2?min')\n return window.vtk\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":23,"value":"### Other Imports","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"import {localFileInput} from '@mbostock/localfile'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}