Cursor pointer on hover

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

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";

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

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

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.

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);
    }
};

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

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

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

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