1

I've been stuck with this for so long now.

I'm using a Fabricjs canvas as a texture for a 3D model in Three.js. The model renders the canvas as a texture every time there's a change on it.

I would like to click on the model and programmatically select an item on the Fabricjs canvas.

I achieved to transform the 3d coords to the Fabric 2D coords with a raycaster, so I can add new items to the canvas clicking directly on the model. But I can't find the way to select a canvas object clicking on the model because there's no "getObjectFromCoords" or similar method on Fabricjs

Is there any way to programmatically select an object from a Fabricjs canvas?

Threejs scene and Fabricjs canvas

Ricki
  • 81
  • 11
  • Do you have a snippet to demonstrate this? Is [this one](https://codepen.io/ricardcreagia/pen/EdEGod) still valid? – shkaper Dec 04 '18 at 16:55

1 Answers1

1

If all you need is to simply select an object based on (x,y) (i.e. not actually handling drags, resizes, etc), there is fabric.Canvas.prototype._searchPossibleTargets() that Fabric.js uses internally:

const pointer = {x: x, y: y}
const target = canvas._searchPossibleTargets(canvas.getObjects(), pointer)
if (target) {
  canvas.setActiveObject(target).requestRenderAll()
} else {
  canvas.discardActiveObject().requestRenderAll()
}

Note that since it is an internal method, its signature could change from version to version.

shkaper
  • 4,689
  • 1
  • 22
  • 35