Jump to content

(More) Proper way to implement event handlers


paleRider
 Share

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.

Link to comment
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

Link to comment
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
Link to comment
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
Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...