AxesActor customization

I am trying to produce orientation axes that look like those in paraview (e.g.: ). According to AxesActor | vtk.js I should be able to add labels. Additionally, it should be possible to customize fonts accessing vtkCaptionActor2D, however I have not been successful in doing so. I have looked at the source code, but I do not seem to find any equivalent to the C++ implementation for this task. Is there an example showing how to do so?

Thank you in advance for your help.

I have played around with this although still haven’t implemented text labels. I think it could be implemented by extending the method I have in this Observable notebook:

I’d love to hear about any improvements you make on this!

1 Like

You may be interested in checking out the SpheresAndLabels example. There are no native webgl 2D actors as of yet, but we have ways of mapping 3D coordinates into display coordinates, allowing you to place HTML or SVG elements at the appropriate places.

Hi Forrest-

I have a couple related questions:

  • In the example I shared, the face normals of the interactive orientation cube seem to be flipped (or something else?) for faces that are facing towards the camera. The example in the docs doesn’t seem to have this issue. Do you have any idea as to what is causing that?

  • What event is fired when I rotate the scene? renderer.getInteractor().onRotate() does not seem to be the one, I’ve tried quite a few others.

  • What would be the best way to implement some kind of onMouseIn / onMouseOut event for the orientation indicator itself?

Thanks for any and all advice!

  1. I’m not sure where the cube is in your link. I only see 5 dots; is that your “orientation cube”?
  2. Rotating the scene means moving the camera, so you can listen via camera.onModified(callback).
  3. There isn’t really a “mouse in/out” event. What are you trying to do with such an event that can’t be done with detecting if the mouse is hovering over a scene object?

Sorry for not being clear @Forrest

If you click and drag to the right of the 5 dots you’ll rotate the scene / interactive orientation indicator, like so:
Screen Shot 2021-10-22 at 2.31.20 PM
The face that’s facing towards the camera (and its opposite) seem to not be shaded correctly.

I want to detect if the mouse is hovering over one of the actors in the OrientationMarkerWidget or one of the faces of the InteractiveOrientationWidget.


Revisiting this old topic: if you want to detect mouse activity over an object in the scene, you can associate it with some state. For example, the PolyLineWidget example demonstrates how hovering over a sphere handle can cause it to change color.

To handle this, you will need to extend InteractiveOrientationWidget. There is no way to do what you’re looking for on the base implementation.

1 Like

Thanks @Forrest, I’ll take a look at the PolyLineWidget.