paleRider Posted October 19, 2017 Share Posted October 19, 2017 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. Quote Link to comment Share on other sites More sharing options...
RaananW Posted October 19, 2017 Share Posted October 19, 2017 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? Quote Link to comment Share on other sites More sharing options...
paleRider Posted October 19, 2017 Author Share Posted October 19, 2017 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 . Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 19, 2017 Share Posted October 19, 2017 I think you can still rely on the bjs system https://www.babylonjs-playground.com/#RLQVGD paleRider 1 Quote Link to comment Share on other sites More sharing options...
paleRider Posted October 19, 2017 Author Share Posted October 19, 2017 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. Quote Link to comment Share on other sites More sharing options...
RaananW Posted October 20, 2017 Share Posted October 20, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
paleRider Posted October 20, 2017 Author Share Posted October 20, 2017 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. Quote Link to comment Share on other sites More sharing options...
paleRider Posted October 27, 2017 Author Share Posted October 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 27, 2017 Share Posted October 27, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
paleRider Posted October 27, 2017 Author Share Posted October 27, 2017 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. Quote Link to comment Share on other sites More sharing options...
Nabroski Posted October 28, 2017 Share Posted October 28, 2017 maybe it's helpfulhttps://www.babylonjs-playground.com/#DSH13I#1 Quote Link to comment Share on other sites More sharing options...
paleRider Posted October 28, 2017 Author Share Posted October 28, 2017 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. Quote Link to comment Share on other sites More sharing options...
dbawel Posted October 29, 2017 Share Posted October 29, 2017 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 Arte 1 Quote Link to comment Share on other sites More sharing options...
paleRider Posted October 29, 2017 Author Share Posted October 29, 2017 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"; } dbawel 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted October 30, 2017 Share Posted October 30, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
paleRider Posted November 2, 2017 Author Share Posted November 2, 2017 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. GameMonetize 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.