vtk.js AxesActor

Web
1

I’m trying to utilize AxesActor in vtk.js to show an axes triad similar to paraview, the documentation states “the user can set the text for the three axes.” however I don’t see any methods to set the text in the documentation and text does not appear when using the AxesActor.

I noticed that the Introduction description to AxesActor also is the exact same as the VTK C++ docs, I’m assuming text labels were never implemented in vtk.js and this was accidently copied from the C++ docs?

Are their any examples of showing an axes triad similar to how it is shown in paraview or this example?

image

2

@Forrest

1 Like
3

yes indeed, the text part was never implemented. @sankhesh may have some ideas on how to enable those.

4

@alexDrinkwater Yup, you are right in your assumption. The documentation was copied over but the functionality is missing. This is because text in vtk-js is implemented as an svg layer that is different from the C++ version. One can add it similar to how the label widget or shape widget adds it.

5

Following up on this, can the arrows be translated so that they start from a common point as in paraview, rather than crossing each other as in the default?

6

you need to change default configuration, I’m not sure what is the standard way to change this, but the code below should be work

import vtkAxesActor,{DEFAULT_VALUES as vtkAxesActor_DEFAULT_VALUES} from 'vtk.js/Sources/Rendering/Core/AxesActor';

const config = vtkAxesActor_DEFAULT_VALUES.config;
config.recenter = false;
const actor = vtkAxesActor.newInstance({config});

hope this helps.

8

That code does not seem functional (using vtk.js with typescript here): no config member of vtkAxesActor_DEFAULT_VALUES and no recenter option if an instance of the vtkAxesActor_DEFAULT_VALUES is created are the issues I see.

9

I’m not quite sure about TS code, normal JS code should work. Basically you need to change the default configuration of vtkAxesActor.

1 Like
10

Yes, the code above won’t work in TypeScript but works in plain Javascript
The syntax for TypeScript is:

            const axes = vtkAxesActor.newInstance({
                pickable: false
            });            

            axes.setConfig({recenter: false});

No need to import DEFAULT_VALUES.

Thank you for pointing me in the right direction! :smiley:

11

Hi @sankhesh, is there any workaround to achieve the text (“X”, “Y” and “Z”) in three axes of the vtkAxesActor? I am using a vtkOrientationMarkerWdget with vtkAxesActor to build the coordinate marker. I really appreciate it very much if you could kindly give me some insights… or what you are saying is that add a vtkLabelWidget to the vtkOrientationMarkerWidget?