Free camera with custom fov zoom control for pinch gesture

Questions
1

Hello, everyone!

Learning from various posts, I have been trying to make a free camera with custom controls:

  1. 2D position movement restricted to a certain axis plane (solved)
  2. Fov zoom (solved for mouse wheel, not for pinch gesture)

PG: https://playground.babylonjs.com/#F1VGI7#1

Question: how to implement the fov zoom for pinch gesture?

Hope someone can point me to the right direction.
Thanks in advance!

2

Still having no luck figuring this out myself…

I would be very grateful if someone can share some ideas.:smiley:

3

Hey sorry for some reasons I missed your post.
So to implement pitch you have to use pointer events like pointer down and pointer move.
So your question you can have a look at how we do the pinch for the arcrotatecamera:
Babylon.js/arcRotateCameraPointersInput.ts at master · BabylonJS/Babylon.js · GitHub

1 Like
4

Thanks, @Deltakosh !

Sorry for my rudimentary questions, but how can I detect a multi-touch event (pinch)?

5

No worries :slight_smile:

so first you have to register some code from the onPointerMove, up and down:

this.camera.getScene().onPointerObservable.add(
            myCode,
            PointerEventTypes.POINTERDOWN | PointerEventTypes.POINTERUP |
            PointerEventTypes.POINTERMOVE);

myCode will be called for all the associated events.

You can check the code used by the arcrotatecamera here:

Specifically on pointer up herE:

The overall idea is to track evt.PointerId to identify multiple touch points and then evaluate distance between point A and B to detect the pinch

1 Like
6

@Deltakosh Thanks so much! It’s working.:metal:

7

Glad to hear that:)

8

Hi,
Is there a simpler way to get this - ie an event like PINCH and change in distance (ie deltaDistance) with the code above? Implementing the code above looks more challenging than it needs to be.

1 Like