2f: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(); }); }30: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 }31:[] 2d:{"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 = htl.html`

","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 = import(\"https://cdn.skypack.dev/vtk.js?min\").then(() => window.vtk)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}