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

Questions
1

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

3

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?

6

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:

8

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

1 Like
9

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

2 Likes