A way to show an "action hover icon" when only picking

Questions
1

I am making some 3D controls. One is a scrollable list, which can be part of dropdown as well. There is a toggle mesh to the right of list item container.

scrollable list
scrollable list742×774 12.3 KB

There are 2 shapekeys (could have also used bones instead) which rotates the toggle mesh one way or the other, and animation in the toggle’s parent class which calls them. It works, but unlike an action, the hover icon does not change.

Is there a way to do that without an action? It is really only for dev and desktops, XR is fine. More of just a nice to have.

Edit:
It has 3 sub materials, 1 for the sides(gold for now), & 1 for each face (initially both orange). Pick can get the sub material picked, thus avoiding a pick mesh (my war on the # of them). I also change to a red material for the direction picked for the duration of the animation.

It could be implemented as 3 meshes, but I am building very large displays (literally 3 meters high) with many controls. Think I get slightly better tradeoffs this way, & I do not have to an armature to animate if a single mesh.

2

changing the cursor is a simple css change. we change the css as part of an action, but you can add it to pointer move as well. For that to work you will need to run picking on each frame (constanly update the mesh under pointer) a simple pg:

Babylon.js Playground (babylonjs.com)

2 Likes
3

Thanks, css is not my strong area. I kind of gave up on html with css & html 4. Hamster wheeling using React is also not a place I like to go to.

Now that I knew what to look for, a File Explorer search of ‘cursor.style’ brings scene.inputManager.ts right up. Your pg with an extra instanceof check on the mesh class should work just fine.

1 Like