Three.js: DragControls, mouse-click-events not working properly r120

[obrhaberer]

I've noticed you switched to pointer-events in some modules. DragControls in r120 does not work properly for some reason in r120. No click-events are fired on renderer.domElement.

Three.js version

• [ ] Dev
• [x] r120
• [ ] ...

Browser

• [] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [] All of them
• [ ] Windows
• [x] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

DragControls does not use Pointer Events yet. Are you using the controls in combination with another one?

[obrhaberer]

I'm using DragControls and OrbitControls inside a project for 2 years now and recognized this "bug" after the update to r120. When I switch to r119 everything works fine.

[Mugen87]

Do you mind demonstrating the issue with a live example? In this one, the integration of both controls seems to work. And the click event is triggered:

https://jsfiddle.net/7jk50Lxm/1/

[obrhaberer]

just add for example
renderer.domElement.addEventListener('mousedown', () => console.log('down'))

so maybe the three.js EventDispatcher is overwriting some behaviour?

https://jsfiddle.net/uLfcwt7a/1/

[Mugen87]

OrbitControls calls preventDefault() on pointer down and move events. This automatically cancels the respective mouse events. You can only fix this by using pointerdown.

https://jsfiddle.net/zwt2rfvm/

[obrhaberer]

sure I can fix after initialization, but the DragControls module internally uses the mouse-events. maybe something to fix in the nearer future.

[Mugen87]

Definitely. Although you should always disable OrbitControls when DragControls becomes active. In this case, OrbitControls will not cancel its pointer events and thus DragControls should not be affected.

[obrhaberer]

To use the hover-event as helper to enable/disable the OrbitControls does the trick. Thanks a lot.