How can I move the camera to the direction of mouse pointer?

Hello everyone

I want to know how can I move the camera to the mouse pointer when I db click anywhere on the scene, for the meshes it is work properly and when db clicked on the meshes the camera zoom in to the target but also I want to zoom the camera to other region of the scene where there is no mesh, so I want to know how can I move the camera to the direction of the mouse pointer automatically not with mouse scroll wheel. how can I do it? (with the aid of mouse scroll wheel I can zoom to the mouse pointer)

Here is my code:


    camera.zoomToMouseLocation = true;


    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})
        gsap.to(camera, 2, { radius: 50 });


    }, BABYLON.PointerEventTypes.POINTERDOUBLETAP)

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

A) Scene. PointerX/Y is already the position of the clicked mouse position!

B) Create a gigant sphere around your scene and camera so that you always click on a mesh.

1 Like

Hello @Necips , Thank you so much for your recommendation. :pray: :pray:

I mean how can I move the camera to the pointer direction, I. didn’t understand how can I do it.

and another question how can I create a gigant sphere?

I think you need an other type of camera to move to the mouse position

forwardDirection needs a vector. The vector you need is defined by camera.position to mouse.position (with pseudo z of camera.position.z + 10 (or more)

1 Like

Thanks a lot @Necips :pray: :pray: :pray:
I studied on all the sources which you recommend to me, but I didn’t found a way to zoom in with dbClicked on the scene when there is no mesh. :sweat:

I am sorry. I can not help you. This is a task for masters in 3D. It is not easy to convert MousePosition to CanvasPosition and from this point calculcate a vector regarding the position of the camera and its direction vector…

This is so far some stations I touch on my journay:

1 Like

Thanks a lot for all your helps and recommends. :pray: :pray: :pray: :blue_heart:

1 Like

It works well for meshes, as they have depth infromation (and not just x and y) so - if you click on a mesh you know the point in (scene) space to which you want to zoom in. But if you click in the void, it can be 10 units away or 1000 units away. both will result in different point on screen to focus on.

A simple solution for that is to have a fixed skybox to is far away in the distance, but still available. if that’s the case, you can make it pickable and focus on the point:

https://playground.babylonjs.com/#UU7RQ#1768

1 Like