Listening to click events on mesh

Is it possible to listen to a click event on a mesh? I have a situation in which I want to disable the camera rotation and have a user click on a mesh. Once the user clicks on a mesh, they should be able to rotate the mesh and only the mesh. Is this possible in Babylonjs? If so, where should I look to be able to do this?

One way is to create an ActionManager for your mesh and register i.e. ExecuteCodeAction with OnPickTrigger:

Another solution would be to create onPointerObservable for your scene:

scene.onPointerDown = () =>
{
  if(...) // scene.meshUnderPointer is equal to your mesh
    {
      // your code
    }
}

You could also use onPointerUp or onPointerObservable with PointerEventTypes.POINTERDOWN or -UP tag.

meshUnderPointer-property of Scene:

https://doc.babylonjs.com/typedoc/classes/BABYLON.Scene#meshUnderPointer

How to use Observables:

Edit:

To enable/disable camera rotation, you can add/remove or customize i.e. mouse input from camera:

Also here is an example playground, how camera mouse input is customized by checkInputs() of FreeCameraMouseInput:

To enable/disable mesh rotation by mouse input, you can add/remove observer for i.e. onPointerMove or onPointerObservable with PointerEventTypes.POINTERMOVE tag.

4 Likes

For your convenience, I add a rough example for the exposed solution #2 above using scene pointer observables and pickInfo. Since I don’t think there is one featured in the doc for this solution (as opposed to the Actions method for which you already have the PG in the link shared by @Takemura.

This small PG quickly drafted shows how pointers are detected in scene when picking a mesh or the scene background. Ideally, you would work it all through a single function but I believe, for a start, this is more explicit to show like this. I hope this helps and meanwhile, have a great day :sunglasses:

3 Likes