An opinion about using Fabric.js, p5.js, or Pixi.js with Three.js configurator

Questions
1

Hi guys,

I have a question. I’m starting to create a new configurator. This time, I’ve been asked to allow users to upload, move, modify, and rotate multiple logos on a Three.js model.

I started thinking Fabric.js might be the best solution. But I would like to know your opinions. Do you have experience with other frameworks like p5.js or Pixi.js (despite i think they have different purposes)?

Thanks and kind regards,

Davide

2

TLDR; Go with with Fabric.js

The main selling point of Pixi.js is its performance, compared to other 2D libraries it uses WebGL, so it’s fast. As a standalone setup that’s great, but when used with ThreeJS, it become redundant, you can get the same results as Pixi with an OrthographicCamera, some instanced shapes, and/or sprites. Also when using WebGL the number of contexts is limited to sixteen for chromium and eight for Mobile browsers.

On the other hand, Fabric.js uses 2D Context, so it’s relatively slower, I say relatively because you won’t notice any frame drops until you start adding thousands of objects, and that’s an unlikely scenario, If you are creating a 2D wysiwyg editor, most of the times users will throw a few dozen objects and maybe some animations. You’re not expecting a particle system with thousands of objects!

In conclusion, performance isn’t the main concern, you need a simple API that gives you controls over a 2D canvas with a 2DContext that truly complement ThreeJS without redundancy. Farbic.js perfectly fit that description!

I can’t speak for p5.js, I’ve never used it.

3 Likes
3

Thank you, we’ll start with Fabric then!

My goal is to change the texture of my 3D object by adding logos in SVG, PNG, and JPG formats. I need to resize and position these logos. After this, the user should be able to download the new texture (made using Fabric and applied to the model). They should be able to open this texture in Illustrator before sending it to print on the jersey.

Thanks and kind regards,
Davide

1 Like
4

I suggest you to stick with Fabric, it suits your use-case perfectly.
You can check an old project I made and look at the code (not minified).
http://www.playground.resetstudio.it/facemask/wp-content/plugins/3d-customizer/test-index.php