Three.js: Decal example is not working

[Ben-Mack]

The original decal example is not working anymore on r120: https://threejs.org/examples/#webgl_decals

Nothing happened when clicking on the object, no error reported in console.

[sciecode]

Same underlying issue as #20191. Fix PR already filed on https://github.com/mrdoob/three.js/pull/20194

[Mugen87]

@mrdoob Please let's merge #20194 for now since I'm afraid it won't take long until projects hit into this issue.

[mrdoob]

@Mugen87 I'll have a look at this today. I hope we don't have to revert.

[chilmers]

I ran into similar issues with 0.120.0 where it seemed like the upgrade (probably OrbitControls) ate my mousemove events while panning (i.e. while the mouse button was down I no longer got any mousemove events).

When I changed my code to listen to 'pointermove' (as the OrbitControls does) instead of 'mousemove' it started working again.
Not sure if it helps with this particular issue but it might be a clue.

Could it be that if a pointermove eventlistener is triggered, then the browser would not trigger the mousemove event for some reason since they are almost the same?

[Mugen87]

Could it be that if a pointermove eventlistener is triggered, then the browser would not trigger the mousemove event for some reason since they are almost the same?

It's explain at the MDN: https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

If you use pointer events, you should call event.preventDefault() to keep the mouse event from being sent as well.

OrbitControls and TrackballControls use event.preventDefault() in certain event listeners which is responsible for this breakage.

[chilmers]

I guess you are referring to this part of the doc?

If you use pointer events, you should call event.preventDefault() to keep the mouse event from being sent as well.

I thought the event would still be propagated to my event listener since the OrbitControls isn't doing event.stopPropagation but this might explain why i got no mousemove and also why changing to pointermove worked (since I guess that one is still propagated).

Interesting, thanks!

[mrdoob]

Fixed: https://github.com/mrdoob/three.js/commit/2b477f0cca8463a4b7f81eeecf9fe53f54877b91

This example also never worked on mobile before either.

[mrdoob]

Seems like in order to update to r120, users will need to change their mouse events to pointer events...

[marcofugaro]

@mrdoob have you considered removing the preventDefault() from the pointerdown event? I couldn't find any reason why it is there.

[mrdoob]

@marcofugaro Just because mousedown used to have it. I'll give it a try and test things tomorrow 👍

[mrdoob]

@marcofugaro That ended up being not the problem and I didn't pursue the investigation.