vtk.js AxesActor

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?



1 Like

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

@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.

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?

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.

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.

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

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:

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?