2c:null 2d:["$","title",null,{"children":"Creating a VTK.js Orientation Indicator | Nicolas Schmidt | Observable"}] 32: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 }; };33: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() }) }34: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 }35:[] 30:{"id":"f9a4fc1c96d9b59f","slug":"vtkjs-orientation-indicator","title":"Creating a VTK.js Orientation Indicator","thumbnail":"62e8c8b634da291471dd802ff073fd925f1ae1e97b7b2b5b69e3c9c48db7f619","access_level":"public","create_time":"$D2021-10-19T21:14:59.180Z","update_time":"$D2023-05-29T19:54:53.388Z","view_time":null,"first_public_time":"$D2021-10-20T17:35:27.000Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"57799c7dfb47a7cc","login":"ngimbal","name":"Nicolas Schmidt","avatar_url":"https://avatars-next.observableusercontent.com/509a135bcff70b7551312b472ac5f66624c1a6a9ef3fd17866e13bba9110cd8b","tier":"starter_2024"},"version":191,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Creating a VTK.js Orientation Indicator","cells":[{"id":0,"value":"# Creating a VTK.js Orientation Indicator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"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":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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"Add Orientation Indicator","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"### Params","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"axisRadius = 0.045","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"sphereRadius = 0.25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"sphereTheta = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"spherePhi = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"addColor = (ds, r, g, b) => {\n const size = ds.getPoints().getData().length;\n const rgbArray = new Uint8Array(size);\n let offset = 0;\n\n while (offset < size) {\n rgbArray[offset++] = r;\n rgbArray[offset++] = g;\n rgbArray[offset++] = b;\n }\n\n ds.getPointData().setScalars(\n vtk.DataArray.newInstance({\n name: 'color',\n numberOfComponents: 3,\n values: rgbArray,\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"### Create Orientation Indicator","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"vtk.SphereSource","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"majorAxis = (vec3, idxA, idxB) => {\n // from https://kitware.github.io/vtk-js/examples/GeometryViewer.html\n // index = larger of vec3 at index A or B\n // if vec3 at index is positive, \n // return vec3[index] = 1\n // else return vec3[index] = -1\n const axis = [0, 0, 0]\n const idx = Math.abs(vec3[idxA]) > Math.abs(vec3[idxB]) ? idxA : idxB\n const value = vec3[idx] > 0 ? 1 : -1\n axis[idx] = value\n return axis\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"