Three.js: A question, why use ownerDocument in OrbitControls, but DragControls not?

[MorphZhou]

Hi, I use both OrbitControls and DragControls in my Scenario Editor Project. When I drag the target mesh out of the Canvas, the Canvas will make a large rotation due to the mousemove event binded to the ownerDocument by OribitControls. My solution is to overwrite the activate & deactivate function with ownerDocument in DragControls. Or the same to overwrite the Orbitontrols event function without ownerDocument.

DragConrtols L21 ~ L45, without ownerDocument
https://github.com/mrdoob/three.js/blob/696d7836d1fc56c4702a475e6991c4adef7357f4/examples/js/controls/DragControls.js#L21

OrbitControls L914 ~ L921, with ownerDocument
https://github.com/mrdoob/three.js/blob/696d7836d1fc56c4702a475e6991c4adef7357f4/examples/js/controls/OrbitControls.js#L914

Using ownerDocument will expand the scope of the mouse event. Is there any special purpose?

[Mugen87]

see https://github.com/mrdoob/three.js/issues/19478#issuecomment-635225791

[mrdoob]

When changing the camera view by dragging the viewport in https://threejs.org/editor/, I found it frustrating that the view would stop changing because I hit the end of the viewport.

Most common 3d software behaves like that I think.
In fact, I remember some 3d software would even wrap the cursor around the screen 😁

[MorphZhou]

Thanks

[lulupy]

in TrackballControls use pointerdown event cause mousedown event is not triggered in DragControls.

<button>button</button>
<script>
const btn = document.querySelector('button');
const fn1 = (event) => {
  event.preventDefault(); //  this is key
  console.log('fn1');
}

const fn2 = () => {

  console.log('fn2');
}
btn.addEventListener('mousedown', fn2, false);
btn.addEventListener('pointerdown', fn1, false);
</script>

will not print fn2.

[Mugen87]

@lulupy Yes, this is a known restriction. You have to use pointerdown in this case.