How can I set the camera to follow the mouse pointer over the ground like flying over the ground

Hello everyone

I have the ground and I want to set the camera follow the mouse like flying over it.
I first build this PG: https://playground.babylonjs.com/#XB49NT#50
and then I change POINTERDOUBLETAP to POINTERMOVE.
how can I change my PG that camera follow the mouse pointer on the model.
I just want to move the camera and set camera.target to mouse pointer over ground. and when the mouse start to move the camera goes to mouse pointer over the model.

  scene.onPointerObservable.add((evt, pickInfo) => {
    if (evt.pickInfo.hit) {
        gsap.to(camera.target,1,{x:evt.pickInfo.pickedPoint.x,y:evt.pickInfo.pickedPoint.y,z:evt.pickInfo.pickedPoint.z})
      console.log("G", evt.pickInfo.pickedPoint);
      impact.position = new BABYLON.Vector3(evt.pickInfo.pickedPoint.x,evt.pickInfo.pickedPoint.y +20,evt.pickInfo.pickedPoint.z);
    }
  }, BABYLON.PointerEventTypes.POINTERMOVE);

By default, pointermove events do not pick meshes. This is a performance optimization because picking is an expensive operation and pointermove events are very frequent.

To enable pointer move events, simply write:

ground.enablePointerMoveEvents = true;

Here is the PG you posted with that change. This change has a considerable performance impact on my device, so I would recommend looking into alternative options. It’s hard to know what would work for your usecase, but here’s a couple of ideas:

  • If you lock the camera in a top-down POV, it’s much cheaper to just convert the screen space coordinates to world space
  • You can actively pick meshes, see this doc page. This would give you more control over when the picking computations are performed; you don’t necessarily have to do them every frame.
4 Likes

Thank you so much for your helping :pray: :pray: thanks a lot for your explanation. :pray: :pray:
is it possible to use pointermove events to follow the mouse position?

1 Like

Could you clarify what you mean by that? In the playground, the impact mesh follows the position of the mouse. Are you looking for a different behavior?

1 Like

sorry for my imprecise explanation, no I want something like this but just maybe a little different. I have 4 models, and I want to build a FLY MODE for my app, which the camera follow the mouse over the models like moving airplane.

I would recommend looking into this page: Customizing Camera Inputs | Babylon.js Documentation (babylonjs.com)

I think it will be hard for us to help further without a better understanding of exactly what you’re looking for. Do you have an example that could help demonstrate what you want to do?

3 Likes

I couldn’t find any example for it, I just see this feature on ArcGIS Application but I don’t access to ArcGIS app to record the screen for this feature. Thank you so much for Your help and all your recommends. :pray: :pray: :pray: :blush: