Sign in to follow this  
paleRider

(More) Proper way to implement event handlers

Recommended Posts

Hi everybody:

I need to know about what is the preferred approach to handle the mouse/touch events (for example onclick):

 

(1) via the canvas by means of

myCanvas.addEventListener("pointerdown", function (evt) {
    ...
    var pickInfo=myScene.pick(myScene.pointerX,myScene.pointerY,function(mesh){
            return (mesh===myMesh);
  });
        
    if(pickInfo.hit){
            alert("Mesh picked");
    }
});

 

(2) via the mesh using the powerful ActionManager functionality

myMesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickDownTrigger,function(evt){
    alert("Mesh picked");
}));

 

Thank you for your time.

Share this post


Link to post
Share on other sites

Hello there is a third alternative: using scene.onPointerObservable

This way the scene will handle all events for you and you will just have to add your own observer to get all events.

That's the way used by all cameras for instance:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/babylon.arcRotateCameraPointersInput.ts#L141

Share this post


Link to post
Share on other sites

Ok, very interesting.

I'm going to study right now this third option in order to have a comprehensive mental map of all this subject of "event interfacing".

Anyway, let me ask you about what is the best option in terms of "good practices", "performance" and last but not least "cross-browsing support" (considering here even Android and iOS, by means of hybrid apps and embedded browsers)?

For example I think that the "canvas addEventListener " way is going to be a "cross-browsing" problematic solution, as the implementation of web events between different browser vendors is always a little nightmare. Anyway I need to take this approach when "onmousemove" functionality is a must (for example in order to drag a mesh), as ActionManger doesn´t support mouse-move triggering).

On the other hand I assume that ActionManager  and the mentioned onPointerObservable, implement a more "common-interface" solution, as based on WebGL. Isn´t it?

Edited by paleRider
Completion

Share this post


Link to post
Share on other sites

In order to use the BJS implementation of the (famous) Observable Pattern, with pointer events, I see two ways are possible:

  1. To use an already implemented (dedicated) BJS Observer. I can´t find in the docs a Mesh callback method but a Scene's one (myScene.onPointerObservable). Is this correct? If "yes", do I need to use myScene.meshUnderPointer to get my mesh?
  2. To define my own myMesh-Observable.

Keeping the things as simple as possible (a good reason to use an engine) and so taking the first approach, something like the following would be written:

myScene.onPointerObservable.add(callback, mask, insertFirst);

I need some help in order to understand the way to write the callback param in JS, as the arcRotateCamera implementation link (https://github.com/BabylonJS/Babylon.js/blob/master/src/Cameras/Inputs/babylon.arcRotateCameraPointersInput.ts#L141) you sent me to study, is of course in TS (bellow code shown simplified):

observer = scene.onPointerObservable.add(pointerInput, PointerEventTypes.POINTERDOWN | PointerEventTypes.POINTERUP | PointerEventTypes.POINTERMOVE); 

where

pointerInput: (p: PointerInfo, s: EventState)

being the docs (http://doc.babylonjs.com/classes/3.0/observable) already focused on TS implementation.

Thanks.

 

Edited by paleRider
Completion

Share this post


Link to post
Share on other sites

Ok, I see now that this kind of functionalities are already addressed and well solved by Wingnut and iiceman in another thread of this forum: http://www.html5gamedevs.com/topic/27410-need-a-sample-for-dragging-and-collision-detection-implemented-by-actionmanager/

Best regards.

P.S. I agree that to add some kind of onPointerMove trigger to ActionManager would be fine.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.