solved Best method to change pointer on hover

[paleRider]

Hi everybody:

Only a quick question.

Usually I prefer to use "Observables" over others BJS alternatives, in order to manage all user interaction, namely:

myScene.onPointerObservable.add(onPointerDown,BABYLON.PointerEventTypes.POINTERDOWN);
myScene.onPointerObservable.add(onPointerUp,BABYLON.PointerEventTypes.POINTERUP);
myScene.onPointerObservable.add(onPointerMove,BABYLON.PointerEventTypes.POINTERMOVE);
...

This works great but it lacks of the functionality of changing the pointer to the one with the hand, so I need to add an extra step, by means of Action Manager:

myMesh.actionManager=actionManager;
myMesh.actionManager.registerAction(new BABYLON.DoNothingAction(BABYLON.ActionManager.OnPointerOverTrigger)); /*pointer change*/

Obviously, using the resources of an Action Manager only for the "cosmetic" aim of change the pointer is an overkill. Is there any more clever alternative?

Thanks for your time.

[RaananW]

You can simply do it using JavaScript : https://www.w3schools.com/jsref/prop_style_cursor.asp , while using the observers. Or did I miss something?

[paleRider]

Hi RaananW (and thanks for your time):

The case is that I don´t want to alternate the cursor when "hovering" on a DOM element, but on a BJS Mesh.

Maybe I am now who is missing something .

[GameMonetize]

I think you can still rely on the bjs system

https://www.babylonjs-playground.com/#RLQVGD

[paleRider]

Hi Deltakosh:

First of all, thanks for your time.

Well, I have to take a look to the  enablePointerMoveEvents method of Mesh object, as I did not know it exists.

By the way, the property isPickable is initialized as true with the construction of each new Mesh, isn't it?

And a Mesh is pickable even if is not visible (hidden), yes?

Greetings.

 

[RaananW]

Howdy!

To your questions:

1. Yes, isPickable is true per default : https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.abstractMesh.ts#L191

2. No, it will be filtered by the default predicate: https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.scene.ts#L1421 (should be visible, enabled, ready, and pickable)

[paleRider]

Hi RaananW, ... and thanks for your time.

OK, I thought not-visible meshes were  still pickable (weird behavior). Obviously I'm wrong.

Let me check all this info before check as solved this question thread.

Best regards.

[paleRider]

Hi Deltakosh:

I have almost gone mad just as trying to suppose what I was doing wrong in my code, in order to reproduce the behavior of your PG.

Finally I've arrived to the conclusion that AbstractMesh.enablePointerMoveEvents property, wich is doing "all the magic" here, is only available with BJS v3.1 Isn´t it?

ground.isPickable = true;
ground.enablePointerMoveEvents = true;

scene.onPointerMove = function(evt, pickResult) {
  if(pickResult.hit)
    canvas.style.cursor = "pointer";
}

If my assumptions are true, can you think in a  way to do the same using BJS v3.0? (as this is a production project we need to use the stable version of the engine).

Best regards.

[GameMonetize]

in 3.0 you can just update the scene.pointerMovePredicate:

scene.pointerMovePredicate = function(mesh) {
 return mesh.isPickable && mesh.isVisible && mesh.isReady() && mesh.isEnabled();
}

Just use what you need here

[paleRider]

Thanks Deltakosh, but ...

.... after trying, I can see how I must proceed inside pointerMovePredicate in order to detect when my pointer is over a specific mesh.

[Nabroski]

maybe it's helpful
https://www.babylonjs-playground.com/#DSH13I#1

[paleRider]

Hi there Nabroski:

The problem with your solution is that, as said before, AbstractMesh.enablePointerMoveEvents is not available with BSJ 3.0 (current stable version for production).

Anyway, in my case a straightforward solution would be to have implemented a pair of (sadly missing) observables:

BABYLON.PointerEventTypes.POINTERIN
BABYLON.PointerEventTypes.POINTEROUT

I've tried to implement them but the problem is the lack of a mechanism to detect when the pointer is hovering on a mesh without clicking/tapping.

[dbawel]

Hi @paleRider

There are so many different methods to give focus to elements in HTML, although it depends on your specific needs. Many of the problems I read about on this forum result from everyone trying to accomplish functions within a WebGL script or Javascript in general; when there are SO MANY simple shortcuts using other tools within the HTML5 framework which will accomplish most everything developers wish to accomplish - and with so many more options. I personally would almost always build UI functionality using CSS and perhaps a combination of CSS and JS. 

Instead of building one of the dozens of examples which might show the # of available methods, here is a link which will show you the JSFiddle examples of many methods to do what you are attempting. Also, if you are not familiar with many of these methods, then you will find them invaluable to future and current projects. If you're already familiar with all of the methods in the link I'm providing, then I must be missing some issue specific to your scene. Otherwise, as I now write much of my HTML code in PHP using style sheets for such functionality, I highly recommend that everyone know the power of working outside of their babylon.js scipt and use babylon.js for what it is designed. I know the current goal in the BS community is to be everything to everyone, but this simply isn't a practical solution in my opinion. And it took me almost a year to learn this the hard way - mostly thanks to users on this forum such as @Dad72, @Temechon, @gryff, @Wingnut, and my biggest pain in the ass @Pryme8 - whom all took me back to the advancements made in the basics of web development which I assumed I might be able to overlook as babylon.js could accomplish so many of the basics. And for those developers who have been instrumental in my personal development for online apps and I've neglected to mention here, please forgive me as so many of you have allowed me to accomplish so much that I could never have accomplished on my own - until now.

So the link I recommend to provide you with the answer you're looking for is on the following page:

https://developer.mozilla.org/en-US/docs/Web/CSS/:active

I personally have built versions of most all examples on this page which I wasn't already familiar with, as I find I use them almost daily regardless of the application - providing it's front end developer work. If you don't follow why I recommend working outside of babylon.js for this and so many other functions which users of BJS are trying to fill, I'm happy to expand this response. Otherwise, as for any UI/UX work, I find I am able to create a far better UI and experience for the user outside of the BJS framework; although I applaud all of the developers on this forum who are trying to make babylon.js a one stop shop. However, I personally believe that babylon.js is the best in WebGL frameworks, and that it should be used for what it was designed - as an uncompiled (currently)  language to deliver OpenGL content to a webpage. Although no matter how much it is desired, BJS still must work inside and in harmony with the existing HTML framework. So why not work with the endless tools which already exist in harmony with HTML5? Especially CSS.

Cheers,

DB

[paleRider]

Hi dbawel:

As said before (in relation to RaananW's kind answer), using plane JS DOM events in order to detect the hovering of the pointer on a DOM element is not what I need, but to detect when the pointer is over a BJS Mesh object.

This way, although I was initially reluctant to implement the solution I had initially reached (as I found using Actions here could be and overkill):

myMesh.actionManager.registerAction(new BABYLON.DoNothingAction(BABYLON.ActionManager.OnPointerOverTrigger));

...maybe it is the best way after all, so I'm going to implement my code in that direction and I'm marking this question as solved.

Best regards.

 

P.S. Of course, when the next version of BJS (v3.1) becomes stable, my soltion could be the one by Deltakosh:

myMesh.enablePointerMoveEvents = true;

scene.onPointerMove = function(evt, pickResult) {
  if(pickResult.hit)
    canvas.style.cursor = "pointer";
}

[GameMonetize]

Can you share your experiment on the PG? I'll fix it for you.

But if think it should simple like:

scene.pointerMovePredicate = function(mesh) { return mesh.name === "youknowmyname"; }

 

[paleRider]

Hi Deltakosh:

I'd swear I'd answered to your kind offer.

The case is that at the moment I'm happy with the ActionManager solution, even more knowing that with BJS v3.1 the way to go will be:

ground.isPickable = true;
ground.enablePointerMoveEvents = true;

scene.onPointerMove = function(evt, pickResult) {
  if(pickResult.hit)
    canvas.style.cursor = "pointer";
}

Bet regards.