2b:null 2c:["$","title",null,{"children":"Creating a VTK.js Orientation Indicator | David | Observable"}] 31:T7b7,indicator = { const camera = renderer.getActiveCamera(); const axes = orientationIndicator(); const orientationWidget = vtk.OrientationMarkerWidget.newInstance({ actor: axes, interactor: 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(); }); }32: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 }33:[] 2f:{"id":"5d5c0dcf68fa42db","slug":null,"title":"Creating a VTK.js Orientation Indicator","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-01-16T22:08:36.576Z","update_time":"$D2026-01-17T01:48:17.871Z","view_time":null,"first_public_time":"$D2026-01-16T22:08:36.576Z","has_unpublished_edits":null,"fork":{"id":"f9a4fc1c96d9b59f","slug":"vtkjs-orientation-indicator","title":"Creating a VTK.js Orientation Indicator","owner":{"id":"57799c7dfb47a7cc","login":"ngimbal","name":"Nicolas Schmidt"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cd42f0d98191a7df","login":"dvd101x","name":"David","avatar_url":"https://avatars-next.observableusercontent.com/665b28399b8c69493837e25bfd6b1e60e5c83f5f646e274cf39b5146449e30c6","tier":"starter_2024"},"version":237,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c454621e13d910d3","login":"dvd101x","name":"David","avatar_url":"https://avatars-next.observableusercontent.com/665b28399b8c69493837e25bfd6b1e60e5c83f5f646e274cf39b5146449e30c6","tier":null}],"members":[{"type":"individual","id":"c454621e13d910d3","login":"dvd101x","name":"David","avatar_url":"https://avatars-next.observableusercontent.com/665b28399b8c69493837e25bfd6b1e60e5c83f5f646e274cf39b5146449e30c6","tier":null,"role":"editor"},{"type":"team","id":"cd42f0d98191a7df","login":"dvd101x","name":"David","avatar_url":"https://avatars-next.observableusercontent.com/665b28399b8c69493837e25bfd6b1e60e5c83f5f646e274cf39b5146449e30c6","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"height = Math.min(200, width)","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":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"{\n renderWindow.render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"renderWindow = vtk.RenderWindow.newInstance()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"renderer = vtk.Renderer.newInstance({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"interactor = vtk.RenderWindowInteractor.newInstance()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"openglRenderWindow = vtk.OpenGLRenderWindow.newInstance()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"{\n // Standard rendering code setup\n renderer.setBackgroundFrom([1, 1, 1, 1.0]);\n renderWindow.addRenderer(renderer);\n\n // Use OpenGL as the backend to view the all this\n renderWindow.addView(openglRenderWindow);\n\n openglRenderWindow.setContainer(container);\n\n // Capture size of the container and set it to the renderWindow\n\n openglRenderWindow.setSize(width, height);\n\n // Setup an interactor to handle mouse events\n interactor.setInteractorStyle(\n vtk.InteractorStyleTrackballCamera.newInstance()\n );\n interactor.setView(openglRenderWindow);\n interactor.initialize();\n interactor.bindEvents(container);\n}","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":"$31","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":"$32","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":"