How to Add Axis Labels (X, Y, Z) to vtkAxesActor in JavaScript?

Web vtk.js
,
1

Hi everyone,

I am new to VTK and currently working on a 3D visualization project using vtk.js. I am using vtkAxesActor to display a set of axes on my 3D scene, but I noticed that the axes don’t show the labels for X, Y, and Z. I would like to add these labels to make the axes more informative.

2

Hi, you need to use vtkAnnotatedCubeActor to achieve this :

const interactor = renderWindow.getInteractor();
const axes = vtkAnnotatedCubeActor.newInstance();
axes.setDefaultStyle({
    text: '+X',
    fontStyle: 'bold',
    fontFamily: 'Roboto',
    fontColor: 'white',
    fontSizeScale: (res) => res * 0.72,
    faceColor: '#E0BD00',
    faceRotation: 0,
    resolution: 800,
    edgeThickness: 0.06,
    edgeColor: 'white',
});
axes.setXPlusFaceProperty({
    text: 'L',
    faceRotation: 90,
});
axes.setXMinusFaceProperty({
    text: 'R',
    faceRotation: -90,
});
axes.setYPlusFaceProperty({
    text: 'P',
    faceRotation: 180,
});
axes.setYMinusFaceProperty({
    text: 'A',
});
axes.setZPlusFaceProperty({
    text: 'F',
    faceRotation: 0,
});
axes.setZMinusFaceProperty({
    text: 'H',
    faceRotation: 0,
});

const orientationWidget = vtkOrientationMarkerWidget.newInstance({
    actor: axes,
    interactor: interactor,
});
orientationWidget.setEnabled(true);
orientationWidget.setViewportCorner(vtkOrientationMarkerWidget.Corners.BOTTOM_LEFT);
orientationWidget.setViewportSize(0.1);
orientationWidget.setMinPixelSize(100);
orientationWidget.setMaxPixelSize(300);
3

Hi, thank you for your suggestion!

I noticed that vtkAxesActor in the Python version already shows the X, Y, and Z labels by default. However, in the vtk.js version, these labels are missing. I would prefer to continue using vtkAxesActor and add labels directly to it. Is there a way to achieve this, similar to how it’s done in the Python version, or would I need to rely on another solution like vtkCaptionActor2D?

Thanks for your help!

4

I am not sure vtk.js supports 3D text to set labels, maybe you can write a feature request for it