Cursor pointer on hover

Help & Support
, ,
1

Hi, any way of changing the cursor into a pointer when the mouse hover above an object? That is a 3D object.

2

There is CSS you can use to change cursor.
In Editor we do it simply by changing cursor style property on the body element:

document.body.style.cursor = "pointer";
3

However, these are 3D planes similar to the hotspots used with the technique described here:

http://developer.playcanvas.com/en/tutorials/information-hotspots/

4

So when in code you identify that your mouse is over that plane, you change style on body, then once it is not over the plane anymore - you change back to default cursor.

5

So, instead of doing a raycast for a mousedown event, I’d do one every frame? or on mouse move event or something similar?

ShapePicker.prototype.onMouseDown = function(event) {
    if (event.button == pc.MOUSEBUTTON_LEFT) {
        this.doRayCast(event);
    }
};
6

To do hovering - yep.
I would do not on mousemove event, but in update method using mouse coordinates.
Because mousemove can trigger more times than update, that can damage performance.

1 Like
7

Sorry to necro an old thread.

I don’t see an update event for the mouse?
https://developer.playcanvas.com/en/user-manual/user-interface/input/

Is there a more modern implementation or some other means of changing the mouse cursor on a plane?

Edit: Actually just figured it out. I was using the Button element, so I can change cursor on hoverstart and hoverend (ButtonComponent | PlayCanvas API Reference)

Thanks,
PJ

8

Max is referring to the update function in a standard PlayCanvas scriptType and not an event.

Alternatively, the events won’t be too bad to be honest and can be done as shown in this comment here:

Code:

const button = this.entity.button;
button.on('hoverstart', () => { document.body.style.cursor = 'pointer'; });
button.on('hoverend', () => { document.body.style.cursor = 'default'; });
1 Like
9

Thanks, just figured it out too :smile: :+1:

10

Hi there - For the life of me I can’t get cursor:pointer working on a UI element. The mute button in that scene is the problem. I’m not sure where to include the hoverstart and hoverend code Mute button scene Any suggestions greatly appreciated, I’ll reply here if I figure out the culprit