# vtkAnnotatedCubeActor handle clicked face

**URL:** https://discourse.vtk.org/t/vtkannotatedcubeactor-handle-clicked-face/13346
**Category:** vtk.js
**Tags:** code, vtkjs
**Created:** [February 21, 2024, 6:19am UTC](https://discourse.vtk.org/t/vtkannotatedcubeactor-handle-clicked-face/13346 "2024-02-21T06:19:58Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Vixen](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/v/bb73d2/32.png) [@Vixen](https://discourse.vtk.org/u/Vixen)
#### Post date: [February 21, 2024, 6:19am UTC](https://discourse.vtk.org/t/vtkannotatedcubeactor-handle-clicked-face/13346/1 "2024-02-21T06:19:58Z")

</div>

is there a way to get which face of the vtkAnnotatedCubeActor has been clicked?

trying to use a CellPicker as described here results in a `pickedCellId = -1` regardless of which face has been clicked?

> **[vtk.js](https://kitware.github.io/vtk-js/examples/CellPicker.html)**
>
> CellPickerLive example Sourceimport '@kitware/vtk.js/favicon';// Load the rendering pieces we want to use (for both WebGL and WebGPU)import '@kitware/vtk.js/Rendering/Profiles/Geometry

what I am trying to do is to change the camera view when clicking on one of the faces of the cube.

is there a way to do so?

---

<div class="post-metadata">

### Author: ![Vixen](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/v/bb73d2/32.png) [@Vixen](https://discourse.vtk.org/u/Vixen)
#### Post date: [February 23, 2024, 2:42pm UTC](https://discourse.vtk.org/t/vtkannotatedcubeactor-handle-clicked-face/13346/2 "2024-02-23T14:42:02Z")

</div>

> results in a `pickedCellId = -1

i had 2 mistakes. picking the wrong renderer and setting pickable to false.

leaving this here in case someone made the same mistake:

```js

const axes = vtk.Rendering.Core.vtkAnnotatedCubeActor.newInstance();
// create axes
axes.setDefaultStyle({
    text: '+X',
    fontStyle: 'bold',
    fontFamily: 'Nunito Sans',
    fontColor: 'black',
    fontSizeScale: (res) => res / 2,
    faceColor: '#0000ff',
    faceRotation: 0,
    edgeThickness: 0.1,
    edgeColor: 'black',
    resolution: 400,
});

const cellPicker = vtk.Rendering.Core.vtkCellPicker.newInstance();

renderWindow.getInteractor().onLeftButtonRelease((v) => {
    let pos = v.position;
    let point = [pos.x, pos.y, 0];

    // vtkAnnotatedCubeActor spawns on a new renderer
    cellPicker.pick(point, fullScreenRenderer.getRenderWindow().getRenderers()[1]);
    console.log(cellPicker.getCellId());
})

```