TransformControls translate 2D pane gets invisible near canvas Border

[deethee]

This happens in combination with an Orthographic camera and Orbit Controls only.
I can see the effect in realtime. If I pan the camera the yellow pane disappears if translation handles are close to canvas border.

The rest of the handles work ok.

This happens in Three 124 but the latest version is buggy there also.

This is dependent on zoom also. If you are further out the pane is only visible in center of canvas. Is this related to clipping?

[LeviPesin]

Can you make a JS fiddle reproducing the issue?

[deethee]

https://threejs.org/examples/#misc_controls_transform

Take the example, press c to switch to orthographic camera, zoom out using the mouse wheel. Than use the right mouse button to pan the camera. You will notice the the translation panes are disappearing while panning the camera and you get near canvas border.

[Mugen87]

I'm afraid I can't reproduce the issue. Do you mind showing in a video what you are doing to produce the glitch?

[arodic]

https://threejs.org/examples/#misc_controls_transform

Take the example, press c to switch to orthographic camera, zoom out using the mouse wheel. Than use the right mouse button to pan the camera. You will notice the the translation panes are disappearing while panning the camera and you get near canvas border.

Couldn't reproduce the behavior but in extreme case, the objects can leave the camera frustum (clippig planes) Perhaps that is what deethee is seeing?

[WestLangley]

Is this what I see with OrthographicCamera:

[WestLangley]

For OrthographicCamera, I expect you will want to use a different calculation.

three.js/examples/jsm/controls/TransformControls.js

Line 208 in f30599e

this.eye.copy( this.cameraPosition ).sub( this.worldPosition ).normalize();

Something like this may prevent the handles from disappearing unexpectedly.

if ( this.camera.isOrthographicCamera ) {

	this.camera.getWorldDirection( this.eye );

} else {

	this.eye.copy( this.cameraPosition ).sub( this.worldPosition ).normalize();

}

The frustum clipping may be a different issue...

[Mugen87]

Is this what I see with OrthographicCamera:

Interesting! Can you please describe the setup for reproduction?

[WestLangley]

@Mugen87 I just followed the instructions in the above post.

[Mugen87]

Now with running the demo in full screen I see the glitch, too. My first test in smaller window with different aspect ratio did not really show it.

[deethee]

Sorry for replying late and thank you for uploading the video. It is hard to reproduce but zoom, orthographic camera, the distance from Canvas border, maybe orbit controls and widow size does matter to reproduce this issue.
I think there are other issues related to it.
E.G. if you use one translation axis to move an object along one axis the dragging of the axis movement is sometimes interrupted and stops. This seems to happen sometimes when the alignment changes. E.G. The axis is pointing down, when the axis reaches the bottom canvas the axis alignment flips to up. Often it happens independant from axis flip and only one axis affected, mainly y.
This interruption of axis movement is as well related to zoom out, low distance from border, orthographic camera, window size.

[deethee]

A camera zoom on a orthographic camera is somehow misleading since a zoom in describes a decrease in the camera angle. This is not the case on an orthographic camera since there is no camera angle. The orbit controls change the zoom.
I think this is where the problem lies. The zoom changes the projection matrix and frustum and this is not properly adopted for the TransformControls leading to drag and clipping problems.

[Mugen87]

@deethee Applying @WestLangley's patch from #24208 (comment) definitely mitigates the issue for me. Can you give it a try?

[WestLangley]

@Mugen87 There may still be a frustum far-pane clipping issue -- or is that considered a user error?

[Mugen87]

I'm not sure the clipping issue can be properly addressed (apart from configuring the camera differently in the first place).