How to click on a threejs 3dcanvas to select and modify a fabricjs object

Questions
1

I have a threejs scene with a TextureCanvas object.
This TextureCanvas has a FabricJs canvas which contains a rectangle object.
I want to click the object and modify it (e.g. scale,move,modify it) (similar to interacting with it in FabricJs canvas without threejs).

I found (this and this) with 3dcanvas and 2dcanvas side by side. The user can modify the object in a 2dcanvas.
In the second example the user can click the 3dcanvas which is managed by THREE.WebGLRenderer.
This adds a fabricjs.Circle object which shows up also in the 2dcanvas.
In the 2dcanvas it can be modified (scaled) by dragging the circle corner.

In my case I don’t have a view of the 2dcanvas.
I created another example, where if I click on the square in the 3dcanvas, it is selected (the corners are shown) and the square is scaled. (the 2dcanvas is still shown, but only for reference).
This demonstrates that I can interact with the fabricjs object via the 3dcanvas.

Next, I want to move, or modify the object as if I clicked in the 2dcanvas.
I have the 2dcanvas coordinates of the mouse.

Ideally I want to simulate and inject mousedown, mousemove events, so that fabricjs would respond as if I actually dragged the mouse in the 2dcanvas.
Otherwise, I have to programatically manage all the use cases. For example

  • if clicking the topLeft corner and dragging, set the topLeft coordinates of the fabricjs object and redraw the object
  • if clicking the bottomRight corner and dragging, set the bottomRight coordinates of the fabricjs object redraw the object
  • etc…

So this maybe more of a general js question.
Is there a function to trigger mousedown and mousedrag events, as if I clicked in the 2dcanvas and dragged?

Thanks,
Avi

p.s.
I also posted the question in here

2

Ok, I found a solution in this post and here is a demo that shows that the fabricjs object can be modified in the 3dcanvas that represents threejs scene.
Thanks to StackOverflow user @shkaper who provided and explained the solution!

p.s. the renderer may show as black. May need to “kick” the demo, to show the cube in the renderer, by e.g.

  • toggling the mouse wheel
  • toggling the debugger (F12)
  • toggle the console in codepen demo