Threejs+fabricjs example runs ok on fabricjs version 5 but fails with version 6

[avnermosh]

The following example works ok with fabricjs version 5 but fails with version 6.5.3
(similar examples in jsfiddle are here for version5 and [here for version6])(https://jsfiddle.net/avnerm/h4sfc3e8/6/)
In the example, the user can draw a line in the Canvas or the Renderer, and it shows in the other element.
Using fabricjs version6, causes an error:

planeChange.ts:40 Uncaught TypeError: n.transform is not a function
    at m (planeChange.ts:40:19)
    at E._cacheTransformEventData (Canvas.ts:1114:29)
    at E.__onMouseMove (Canvas.ts:1135:10)
    at E._onMouseMove (Canvas.ts:755:10)

The problem is caused by the functions:

fabric.Canvas.prototype.getPointer
fabric.Object.prototype._drawControl

According to the upgrade notes and here
customization should be done via the class extend rather than via fabric.Object.prototype.
Also, Canvas.getPointer() was deprecated in favor of getScenePoint or getViewportPoint

When these functions are commented, drawing on the Canvas shows in the Renderer.
The MouseDown event responds well. When clicking in the Renderer, the dot is rendered in the correct place in the Renderer and in the Canvas.
But when moving the mouse the on the Renderer always draws a straight line, unrleated to the mouse movement.

What should I do in when using version 6 to apply the patches in getPointer, and _drawControl ?

Thanks

[asturur]

GetPointer was doing both getScenePoint or getViewportPoint If you are not using zoom and pan in the demo they are perfectly equivalent, I m not sure i understand what are the changes to getPointer to guide you how to re-implement them.

_drawControl didn't seem to exist in fabric 5 either at all.

[avnermosh]

@asturur, thank you for replying.
I'm not using zoom and pan in the example.
The changes to getPointer can be seen in the fabricjs version5 example
In the PATCH CODE section.

    /* BEGIN PATCH CODE */
    if (e.target !== this.upperCanvasEl) {
        var positionOnScene = getPositionOnScene(canvasForDrawingThreejsSceneEl, e);
        // console.log('positionOnScene:', positionOnScene);
        pointer.x = positionOnScene.x;
        pointer.y = positionOnScene.y;
        // console.log('pointer', pointer);
    }
    /* END PATCH CODE */

Specifically, if the user draws on the Renderer (i.e. not the Canvas element) a simulated event was triggered as if the user clicked and moved the mouse in the Canvas element which causes the drawing on the fabricjs canvas.

But in version 6 there is no Canvas.getPointer function and the function can not be overloaded via the fabric.Object.prototype.
The end effect is that with version6 when drawing on the Renderer element, the drawn line is incorrect and this is what needs to be fixed.

[avnermosh]

Ok, I solved the fabricjs version 6 problem by extending the fabricjs.Canvas class and overloading the fabricjs.Canvas._onMouseMove() method.
A correct example of ThreeJS and FabricJS version 6.x (6.5.3) can be seen here
The user can draw on the Renderer element and the freedraw path is shown correctly in the Canvas element.
Thanks for your help.