---
title: "Understanding Pointer Events in Twinfinity"
canonical: "https://help.twinfinity.com/space/HCFD/140247046/Understanding%20Pointer%20Events%20in%20Twinfinity"
format: markdown
---
Pointer events are a crucial part of modern user interfaces, covering interactions like mouse clicks, touchpad gestures, and touch screen inputs. They are the backbone of interactive applications, letting users communicate with software through simple gestures and clicks. They matter even more in 3D environments like Twinfinity, where they enable intuitive control and manipulation of digital objects and scenes.

## Integrating pointer events in Twinfinity

In Twinfinity, pointer events enhance interaction with the digital twin environment. You subscribe to `api.onPointerObservable`, inspect the button and event phase, and run a pick to find out what the user touched.

The snippet below catches a left-button "up" event and toggles the highlight on whatever object was clicked:

```ts
api.onPointerObservable.add((eventData) => {
  // We only care about the main button (left click or equivalent).
  const pointerButtonInfo = eventData.twinfinity.button(PredefinedPointerButtonId.Main);

  // In this simple case we only react to the "up" event.
  if (pointerButtonInfo.event === 'up') {
    // pick(false) resolves WHAT was clicked, not where — cheaper, and all we need here.
    const pick: PickResult = eventData.twinfinity.pick(false);
    if (pick.type === PickResultType.IfcProductMesh) {
      // Highlight keeps selection state management simple; just flip it on the clicked mesh.
      pick.ifcProductMesh.highlight =
        pick.ifcProductMesh.highlight !== IfcMaterialHighlightIndex.None
          ? IfcMaterialHighlightIndex.None
          : IfcMaterialHighlightIndex.One;
    }
  }
});
```

### Pointer events, basic example

See the full sample in the playground: [Click to highlight an object](https://playground.twinfinity.dev/?pgId=interaction/click-to-highlight).

This sample demonstrates the basic usage of pointer events in Twinfinity for selecting and highlighting 3D objects. It shows how to set up the listener, identify a specific pointer event, and apply changes based on user interaction — an intuitive way for users to engage with the 3D environment.

## Understanding intersections

Sometimes you need to know precisely *where* in the model the user clicked. For this we use intersections. In the next example we return to a similar pattern, but this time we focus on the pick result with the argument set to `true`, so the pick also resolves the hit position and normal.

```ts
// pick(true) resolves WHERE the ray hit, not just what — it includes hit info.
const pick: PickResult = event.twinfinity.pick(true);

if (pick.type === PickResultType.IfcProductMesh) {
  // hitInfo lists the intersections along the ray; the first is the closest hit.
  const position: Vector3 = pick.hitInfo[0].position; // where on the surface
  const normal: Vector3 = pick.hitInfo[0].normal; // which way the surface faces
  // ...use position/normal — e.g. to place an object on the surface along its normal.
}
```

See it in the playground: [Place an object at the pick point](https://playground.twinfinity.dev/?pgId=interaction/place-sphere).

This sample covers how the position-specific information from the pick event can be used to place objects in the scene.

## The long press

Differentiating between a standard click and a long press lets you build more interactive and dynamic experiences in your 3D models. A long press can trigger its own actions, adding an extra layer of interaction for users.

See it in the playground: [Highlight on long press](https://playground.twinfinity.dev/?pgId=interaction/highlight-long-press).

Combined with other interaction options — like holding the Ctrl key — this can create a very rich and interactive user experience.

## See also

For more interaction patterns, explore [Pick vs camera (time-gated)](https://playground.twinfinity.dev/?pgId=interaction/pick-vs-camera) and [Object edges on selection](https://playground.twinfinity.dev/?pgId=interaction/edges-on-selection).