TransformControls may jump a random distance while starting translation after translating another axis on mobile

[wxfred]

Description

I tested TransformControls on mobile and chrome mobile debug mode, my program has this problem on both.
My codes are complicated, sorry I can't paste them, and I can't reproduce this problem with official demo which is a simple usage. I'm not sure if it only occurs when the scenario is too complex.

But I add console.log to debug the source code of TransformControls, I found in pointerDown and the first pointerMove , planeIntersect may get big difference values when you have just moved another axis
const planeIntersect = intersectObjectWithRay( this._plane, _raycaster, true );

For example, if I moved x axis, released the mouse, then move the same x axis again, no problem. If I moved x axis, released the mouse, then move y or z axis, the problem may occur.

Then, I tried to invoke updateMatrixWorld like below, the problem solved.

pointerDown( pointer ) {

        this._plane.updateMatrixWorld() // add this line will solve the problem

	if ( this.object === undefined || this.dragging === true || ( pointer != null && pointer.button !== 0 ) ) return;

Maybe consider to add this protection to make sure the ray intersection on this._plane return the correct result?

Reproduction steps

Problem
1.move x axis, release mouse
2.move y axis with a slightly movement (don't release mouse), the object may jump a random distance through y axis
3.continue move y axis, no random jumps

No Problem
1.move x axis, release mouse
2.move x axis again, no random jumps

Code

Sorry to provide only parts.

// init
const transformControls = new TransformControls(camera, Renderer.canvas)
const gizmo = transformControls.getHelper()
scene.add(gizmo)
transformControls.addEventListener('dragging-changed', function (event) {
  console.log('dragging-changed', event.value)
  orbitControls.enabled = !event.value
  vm.isDragging = event.value
})

// attach
const intersects = raycaster.intersectObjects(group.children, true)
if (intersects.length > 0) {
  const object = intersects[0].object
  transformControls.attach(object)
  ...
} else {
  transformControls.detach()
  ...
}

Live example

none

Screenshots

No response

Version

0.177.0

Device

Mobile

Browser

Chrome

OS

Windows

[Mugen87]

I can't reproduce this problem with official demo which is a simple usage. I'm not sure if it only occurs when the scenario is too complex.

Do you mind elaborating what you mean with "the scenario is too complex"?

If we can't reproduce the issue with misc_controls_transform, it indicates an issue in your app. Maybe something is interfering with the pointer events and that leads to the mentioned misbehavior. I've applied your reproduction steps multiple times in misc_controls_transform, webgl_geometry_spline_editor and the editor but without triggering the mentioned random jump. Tested with a Pixel 8a and Chrome.

Maybe consider to add this protection to make sure the ray intersection on this._plane return the correct result?

We can't add this code without understanding why it is necessary. I mean it's good that you have found a workaround for your use case but for applying a fix directly in TransformControls we need to reproduce the issue.

[wxfred]

My project is complex, I will try to make a simpler version to reproduce it.

[Mugen87]

Closing until a reproduction test is provided.