Kreeba

Picking up Pinch-to-Zoom Gesture

Recommended Posts

What is the best practice in picking up this gesture, and infact gestures in general?

I know that the Pinch-to-zoom is already implemented as the sorta camera radius increase/decrease on the universal and touch camera, however I want to use the gesture on an orthographic camera, so need to pick up the event.

How?

Share this post


Link to post
Share on other sites

Hey

unfortunately there is no direct support for pinch/zoom gesture event on the web

You can have a look here to understand how I do it for the arcRotateCamera: https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/babylon.arcRotateCameraPointersInput.ts#L115

Basically, based on evt.pointerId, I capture position of first two pointers and then compute the distance between both

Share this post


Link to post
Share on other sites

Hi There

I try to manipulate the pinch-zoom and panning gesture of the arc rotating camera, but the two arguments from the doc don't seem to change the behavier. Do you have any idea what could be wrong?

 

The problem is: The cameras pinch function is too slow...

Quote


                                // Parameters: alpha, beta, radius, target position, scene
                                var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 5, new BABYLON.Vector3(-1300,0,2700), scene);


                                // Positions the camera overwriting alpha, beta, radius  (LeftOrRight,UpOrDown,ForwardOrBackward))
                                camera.setPosition(new BABYLON.Vector3(-1300,0,2700));

                                //set target
                                camera.setTarget(BABYLON.Vector3.Zero());

                                // This attaches the camera to the canvas, prevent default and tels it what button is used for panning
                                camera.attachControl(canvas, false, false, 2);

                                //limit angle
                                camera.lowerBetaLimit = 0.1;
                                camera.upperBetaLimit = (Math.PI / 2) * 1.1;
                                camera.lowerRadiusLimit = 20;
                                camera.upperRadiusLimit = 4500;

                                //sensitivity
                                camera.angularSensibilityX = 4100;
                                camera.angularSensibilityY = 6500;
                                camera.panningSensibility = 100;
                                //camera.speed = 0.5;
                                camera.pinchPrecision = 60.0;
                                camera.pinchDeltaPercentage = 800;

                                scene.activeCamera = camera;

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.