GLTF mouseover event acting weird

Hello,
I’m kind of new to Three.JS

I’m trying to load GLTF model, add mouseover and mouseout events, where mouse over will change the GLTF color, while the mouseout will revert it back to the original.

So far i have been able to achieve it - partially, as appear in the video, in the first case, it doesn’t change anything, unless the mouse pointer come from (out of focus maybe?) directly into the GLTF model without going through the black background.

The code i’m using: https://jsfiddle.net/azoughbi/uv3xtanq/

Any idea what might be done wrong?

Thanks in advance.

Try using pointer events (pointerdown, pointermove, etc) instead.

Thanks for your reply, but that too didn’t work out, same issue.

/cc