Jump to content

Best method to change pointer on hover


paleRider
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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";
}
Link to comment
Share on other sites

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.

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...