Three.js: An option to prevent preventDefault in OrbitControls

[makc]

The use case is 3D view having 100% width of the page, normally we would not want the dragging in 3D view to scroll the page, but in thin mobile windows there is no much else to be done. Either leave padding, or transparent div-s on top of 3D that block touches, both of these methods suck. If in my app I only need controls to rotate horizontally, I'm fine with vertical drag scrolling the page.

[makc]

Ended up doing this hack:

[theo-armour]

Hi @makc

The use case is 3D view having 100% width of the page, normally we would not want the dragging in 3D view to scroll the page, but in thin mobile windows there is no much else to be done.

This is a really good point and long term solutions need to be worked out. We want both scrolling and we want rotation on a mobile - all with an intuitive user experience.

Your hack is a nice start. Thanks.

[vin-ni]

any updates on this?

[Mugen87]

According to https://github.com/mrdoob/three.js/pull/18612#issuecomment-585607781, always using preventDefault() is a good default. Adding an option to disable this behavior or a hack like demonstrated in this issue seems not appropriate and too use case specific. If users require special scrolling logic, it's better to modify a copy of OrbitControls.

[aksperiod]

+1 this. I have the same use-case where I want to use Orbital Controls on mobile to rotate left and right, while also allowing scroll. It seems like it could be fairly common when locking maxPolarAngle/minPolarAngle that this is in order to allow scroll on the page.

Instead I will have to make my own controls now.

[kzka90]

+1 this. Has anyone come with a better solution?

[mrdoob]

I have. Try this on mobile:

canvas {
  touch-action: pan-y;
}

Example: https://3dcomic.shop/inkbots/s01e01/