Drag + Trackball controls

Describe the bug

Hi there!

While setting up a scene with both Trackball and Drag controls active I noticed it has stopped working since version 0.120.0.

I’ve created an example here which demonstrates the issue: https://codepen.io/vasturiano/pen/GRqazYq

As you can see, no drag pointer events are triggered if Trackball controls is enabled on the element.

After diving in a bit, I believe the change was introduced in this particular commit: https://github.com/mrdoob/three.js/commit/f86fcc092aa8459e7b78b3244e02df923f2d4753

The core of the issue is that this pointerdown preventDefault call has a different behavior than when it was applied to the prior mousedown events. As documented here:

If the pointerdown event isn’t canceled through a call to preventDefault(), most user agents will fire a mousedown event, so that sites not using pointer events will work.

So, this preventDefault call is essentially stopping the mousedown events from being triggered in the DragControls (because that module is still using mouse events, not pointer events).

Perhaps the solution is as simple as removing the preventDefault statement, since I think that is a no-op for mousedown events, so it would be in line with the previous behavior.

Or migrate DragControls to use pointer events, that would in theory also solve it.

Btw, I believe OrbitControls has the same effect, since it had a similar change applied.

Just for comparison, here’s a fork of the same example but importing v0.119.1 of TrackballControls instead. You’ll notice that both work simultaneously and can coexist reasonably well. For a seamless experience TrackballControls is disabled dynamically during a drag, so the interactions don’t interfere with each other.

To Reproduce

1. Go to https://codepen.io/vasturiano/pen/GRqazYq
2. Try to drag one of the nodes (it won’t work)
3. Disable Trackball
4. Drag successful

Code

Relevant portion of the code:

// trackball controls
const tbControls = new THREE.TrackballControls(camera, renderer.domElement);

// drag controls
const dragControls = new THREE.DragControls(objs, camera, renderer.domElement);
dragControls.addEventListener('dragstart', () => tbControls.enabled = false); // Disable trackball controls while dragging
dragControls.addEventListener('dragend', () => tbControls.enabled = true); // Re-enable trackball controls

Live example

Not-working (TrackballControls latest version): https://codepen.io/vasturiano/pen/GRqazYq

Working (v0.119.1): https://codepen.io/vasturiano/pen/oNLRVjj

Expected behavior

Like in versions <0.120.0, be able to have both Drag and Trackball controls active simultaneously.

[pfarnach]

Looking at my sandbox again, it seems like whatever the issue was was fixed in 0.127.0. 0.128.0 works but 0.126.1 is broken.

[Mugen87]

I’ve made a PR that introduces Pointer Events in DragControls so it’s easier to see the changes and verify them. The PR indeed fixes your codepen.