31:T425,renderWindowSetup = (container) => { // Standard rendering code setup const renderWindow = vtk.RenderWindow.newInstance(); const renderer = vtk.Renderer.newInstance({}); renderer.setBackgroundFrom([1, 1, 1, 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 }; };32:T7b7,indicator = { const camera = image.renderer.getActiveCamera() const axes = orientationIndicator() const orientationWidget = vtk.OrientationMarkerWidget.newInstance({ actor: axes, interactor: image.interactor }) orientationWidget.setEnabled(true) // orientationWidget.setViewportCorner( // vtk.OrientationMarkerWidget.Corners.TOP_RIGHT // ) orientationWidget.setMinPixelSize(200) orientationWidget.setMaxPixelSize(200) const widgetManager = vtk.WidgetManager.newInstance() widgetManager.setRenderer(orientationWidget.getRenderer()) // set widget renderer to use ortho projection const widgetCamera = orientationWidget.getRenderer().getActiveCamera() widgetCamera.setParallelProjection(true) const interOrientationWidget = vtk.InteractiveOrientationWidget.newInstance() interOrientationWidget.placeWidget(axes.getBounds()) interOrientationWidget.setBounds(axes.getBounds()) interOrientationWidget.setPlaceFactor(1) const vw = widgetManager.addWidget(interOrientationWidget) vw.onOrientationChange(({ up, direction, action, event }) => { console.log('up: ', up) console.log('direction: ', direction) console.log('action: ', action) console.log('event: ', event) const focalPoint = camera.getFocalPoint() const position = camera.getPosition() const viewUp = camera.getViewUp() const distance = Math.sqrt( vtk.Math.distance2BetweenPoints(position, focalPoint) ) camera.setPosition( focalPoint[0] + direction[0] * distance, focalPoint[1] + direction[1] * distance, focalPoint[2] + direction[2] * distance ) if(direction[0]) { camera.setViewUp(majorAxis(viewUp, 1, 2)) } if (direction[1]) { camera.setViewUp(majorAxis(viewUp, 0, 2)) } if (direction[2]) { camera.setViewUp(majorAxis(viewUp, 0, 1)) } orientationWidget.updateMarkerOrientation() widgetManager.enablePicking() }) }33:Ta29,orientationIndicator = () => { const xAxisSource = vtk.AppendPolyData.newInstance() xAxisSource.setInputData(vtk.CylinderSource.newInstance({ radius: axisRadius, resolution: 20, direction: [1.0, 0.0, 0.0], center: [0.5, 0.0, 0.0], }).getOutputData()) xAxisSource.addInputData(vtk.SphereSource.newInstance({ radius: sphereRadius, center: [1.0, 0.0, 0.0], thetaResolution: sphereTheta, phiResolution: spherePhi, }).getOutputData()) xAxisSource.addInputData(vtk.SphereSource.newInstance({ radius: sphereRadius, center: [-1.0, 0.0, 0.0], thetaResolution: sphereTheta, phiResolution: spherePhi, }).getOutputData()) const xAxis = xAxisSource.getOutputData() addColor(xAxis, 94, 252, 20) const yAxisSource = vtk.AppendPolyData.newInstance() yAxisSource.setInputData(vtk.CylinderSource.newInstance({ radius: axisRadius, resolution: 20, direction: [0.0, 1.0, 0.0], center: [0.0, 0.5, 0.0], }).getOutputData()) yAxisSource.addInputData(vtk.SphereSource.newInstance({ radius: sphereRadius, center: [0.0, 1.0, 0.0], thetaResolution: sphereTheta, phiResolution: spherePhi, }).getOutputData()) yAxisSource.addInputData(vtk.SphereSource.newInstance({ radius: sphereRadius, center: [0.0, -1.0, 0.0], thetaResolution: sphereTheta, phiResolution: spherePhi, }).getOutputData()) const yAxis = yAxisSource.getOutputData() addColor(yAxis, 46, 143, 252) const zAxisSource = vtk.AppendPolyData.newInstance() zAxisSource.setInputData(vtk.CylinderSource.newInstance({ radius: axisRadius, resolution: 20, direction: [0.0, 0.0, 1.0], center: [0.0, 0.0, 0.5], }).getOutputData()) zAxisSource.addInputData(vtk.SphereSource.newInstance({ radius: sphereRadius, center: [0.0, 0.0, 1.0], thetaResolution: sphereTheta, phiResolution: spherePhi, }).getOutputData()) zAxisSource.addInputData(vtk.SphereSource.newInstance({ radius: sphereRadius, center: [0.0, 0.0, -1.0], thetaResolution: sphereTheta, phiResolution: spherePhi, }).getOutputData()) const zAxis = zAxisSource.getOutputData() addColor(zAxis, 241, 59, 74) const axesSource = vtk.AppendPolyData.newInstance() axesSource.setInputData(xAxis) axesSource.addInputData(yAxis) axesSource.addInputData(zAxis) const axesMapper = vtk.Mapper.newInstance() axesMapper.setInputData(axesSource.getOutputData()) const axes = vtk.Actor.newInstance() axes.setMapper(axesMapper) const axesProperty = axes.getProperty() axesProperty.setLighting(false) return axes }34:[] 2f:{"title":"Creating a VTK.js Orientation Indicator","cells":[{"id":0,"value":"# Creating a VTK.js Orientation Indicator","pinned":false,"hidden":false,"mode":"md"},{"id":7,"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":174,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":13,"value":"container = {\n const container = DOM.element('div')\n container.style.width = '100%'\n container.style.height = 200 + 'px'\n\n return container\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"Create the image and expose the renderer, renderWindow and interactor objects","pinned":false,"hidden":false,"mode":"html"},{"id":19,"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":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"Add Orientation Indicator","pinned":false,"hidden":false,"mode":"html"},{"id":88,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":26,"value":"### Load vtk.js Module","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"Load vtkjs and expose deeply nested vtkjs imports.","pinned":false,"hidden":false,"mode":"html"},{"id":32,"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 Mapper: vtkjs.Rendering.Core.vtkMapper,\n DataArray: vtkjs.Common.Core.vtkDataArray,\n AppendPolyData: vtkjs.Filters.General.vtkAppendPolyData, \n CylinderSource: vtkjs.Filters.Sources.vtkCylinderSource,\n SphereSource: vtkjs.Filters.Sources.vtkSphereSource,\n OrientationMarkerWidget: vtkjs.Interaction.Widgets.vtkOrientationMarkerWidget,\n InteractiveOrientationWidget: vtkjs.Widgets.Widgets3D.vtkInteractiveOrientationWidget,\n WidgetManager: vtkjs.Widgets.Core.vtkWidgetManager,\n Math: vtkjs.Common.Core.vtkMath,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"vtkjs = {\n await import('https://cdn.skypack.dev/vtk.js@19.1.0?min')\n return window.vtk\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}