How zoom to mouse pointer with the mouse dbclick when I set `camera.zoomToMouseLocation = true;`

Questions
1

Hello everyone

I want to know how can I zoom to the mouse pointer when I double click on the screen. I don’t want just to zoom on the mesh, I want to zoom anywhere when the mouse dbclicked.

here is my code:


...
    camera.zoomToMouseLocation = true;
    scene.onPointerObservable.add((evt, pointerInfo) => {
      
        var pickResult = scene.pick(scene.pointerX, scene.pointerY);
        var impact = new BABYLON.AbstractMesh("impact", scene)
        impact.position = pickResult.ray.direction
        gsap.to(camera.setTarget,1,{x:impact.position.x ,y:impact.position.y,z:impact.position.z})

    }, BABYLON.PointerEventTypes.POINTERDOUBLETAP)

https://playground.babylonjs.com/#Q8VH3H#14

2

Maybe @Evgeni_Popov or @clovett would know about this ?

1 Like
3

Hey Arash,
For zooming when clicked on a mesh, you can calculate the distance between the camera and the mesh and animate/move the camera position towards the mesh along an axis by a factor of 0.X * total distance between the camera and mesh. And for the cases where no mesh has been detected, you may simply advance the camera by a fixed amount. For the direction for the movement you can use mouse events values (X,Y).

2 Likes
4

@Sidharth_Suresh Thank you so much for answering to my question. :pray: :pray:

How can move to the mouse pointer direction,
I can pick mesh and move position towards the mesh , but I don’t know how can I move toward mouse direction.
Here is my code:


 scene.onPointerObservable.add((evt, pointerInfo) => {
      
        var pickResult = scene.pick(scene.pointerX, scene.pointerY);
        if (evt.pickInfo.hit) {
            var pickPoint = pickResult.pickedPoint
            var impact = new BABYLON.AbstractMesh("impact", scene)
            impact.position = new BABYLON.Vector3(pickPoint.x, pickPoint.y, pickPoint.z);
            gsap.to(camera.target,2,{x:pickPoint.x ,y:pickPoint.y,z:pickPoint.z})

        }

        var impact = new BABYLON.AbstractMesh("impact", scene)
        impact.position = pickResult.ray.direction
        gsap.to(camera.setTarget,1,{x:impact.position.x ,y:impact.position.y,z:impact.position.z})

    }, BABYLON.PointerEventTypes.POINTERDOUBLETAP)

and here is my PG: https://playground.babylonjs.com/#Q8VH3H#16