2f:T42b,renderWindowSetup = (container) => { // Standard rendering code setup const renderWindow = vtk.RenderWindow.newInstance(); const renderer = vtk.Renderer.newInstance({}); renderer.setBackgroundFrom([1.0, 1.0, 1.0, 0.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 }; };30:T4c7,loaded = { const reader = vtk.PDBReader.newInstance() const filter = vtk.MoleculeToRepresentation.newInstance() const sphereMapper = vtk.SphereMapper.newInstance() const stickMapper = vtk.StickMapper.newInstance() const sphereActor = vtk.Actor.newInstance() const stickActor = vtk.Actor.newInstance() filter.setInputConnection(reader.getOutputPort()) // filter.setHideElements(['H']) sphereMapper.setInputConnection(filter.getOutputPort(0)) sphereMapper.setScaleArray(filter.getSphereScaleArrayName()) sphereActor.setMapper(sphereMapper) stickMapper.setInputConnection(filter.getOutputPort(1)) stickMapper.setScaleArray('stickScales') stickMapper.setOrientationArray('orientation') stickActor.setMapper(stickMapper) reader.setUrl(`https://files.rcsb.org/download/1and.pdb.gz`, { "binary": true, "compression": 'gz' }).then(() => { console.log('pink') image.renderer.resetCamera() image.renderWindow.render() }) console.log('Okay') image.renderer.removeAllActors() console.log('yellow') image.renderer.addActor(sphereActor) image.renderer.addActor(stickActor) image.renderer.resetCamera() image.renderWindow.render() console.log('blue') }31:[] 2d:{"title":"Visualizing PDB Files in VTK.js","cells":[{"id":0,"value":"# Visualizing PDB Files in VTK.js","pinned":false,"hidden":false,"mode":"md"},{"id":4,"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":9,"value":"For usage of vtkjs in React check this codesandbox.","pinned":false,"hidden":false,"mode":"html"},{"id":11,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":15,"value":"Load a .vtkjs scene file. Find more .vtkjs files here.","pinned":false,"hidden":false,"mode":"html"},{"id":128,"value":"viewof selectPDB = Inputs.select(entertainingPDB, {label: \"Select one\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"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":25,"value":"Create the image and expose the renderer, renderWindow and interactor objects","pinned":false,"hidden":false,"mode":"html"},{"id":28,"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":30,"value":"Set up the render window.","pinned":false,"hidden":false,"mode":"html"},{"id":32,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"Load the file.","pinned":false,"hidden":false,"mode":"html"},{"id":38,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":43,"value":"### Load vtk.js Module","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"Load vtkjs and expose deeply nested vtkjs imports.","pinned":false,"hidden":false,"mode":"html"},{"id":47,"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 Actor: vtkjs.Rendering.Core.vtkActor,\n PDBReader: vtkjs.IO.Misc.vtkPDBReader,\n SphereMapper: vtkjs.Rendering.Core.vtkSphereMapper,\n StickMapper: vtkjs.Rendering.Core.vtkStickMapper,\n MoleculeToRepresentation: vtkjs.Filters.General.vtkMoleculeToRepresentation,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"vtkjs = {\n await import('https://cdn.skypack.dev/vtk.js@25.2.3?min')\n return window.vtk\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":56,"value":"### Other Imports","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"import {localFileInput} from '@mbostock/localfile'","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"Entertaining PDB codes via Proteopedia.","pinned":false,"hidden":false,"mode":"html"},{"id":110,"value":"entertainingPDB = [\"1and\",\n \"1aok\",\n \"1ask\",\n \"1bad\",\n \"1bah\",\n \"1big\",\n \"1bra\",\n \"1boo\",\n \"1bye\",\n \"1bzo\",\n \"1cif\",\n \"1dam\",\n \"1dog\",\n \"1dud\",\n \"1dum\",\n\"1eat\",\n\"1ego\",\n\"1faq\",\n\"1foo\",\n\"1god\",\n\"1goo\",\n\"1hmm\",\n\"1hot\",\n\"1ion\",\n\"1lie\",\n\"1loo\",\n\"1oca\",\n\"1off\",\n\"1ohm\",\n\"1ooh\",\n\"1oop\",\n\"1pdb\",\n\"1pqs\",\n\"1rid\",\n\"1sux\",\n\"1wad\",\n\"1who\",\n\"1wiz\",\n\"1wow\",\n\"1xyz\",\n\"1zap\",\n\"1zyx\",\n\"1zzz\",\n\"2cuz\",\n\"2err\",\n\"2lok\",\n\"2pee\",\n\"2poo\",\n\"3ric\",\n\"4fit\",\n\"4you\",\n\"3way\",\n\"6pax\",]","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}