How to Filter Objects or Selection Borders When Creating CanvasTexture via Fabric.js

[iamnotdou]

Hello everyone,

I’m currently working on a project where I use Fabric.js to create a canvas, which I then convert into a CanvasTexture to apply to a 3D object in Three.js. However, I’ve encountered a challenge that I’m hoping to get some advice on.

Scenario:

• I’m dynamically generating a design using Fabric.js on a 2D canvas.
• This design is then turned into a CanvasTexture and mapped onto a specific area of a 3D mesh in Three.js.

Issue:

• Some objects on the Fabric.js canvas should not be included in the final CanvasTexture.
• Additionally, the selection borders of the objects should be excluded from the texture to ensure a clean application on the 3D object.

Question:

• How can I filter out specific objects or prevent selection borders from being rendered when converting the Fabric.js canvas into a CanvasTexture?
  
  

[mjurczyk]

That’s a fabric.js question though. From three.js side, the answer would just be to provide a proper CanvasTexture value - you can’t and shouldn’t try to remove contents of the CanvasTexture with three.js, instead make sure Fabric.js renders only the things you want into the canvas.