Three.js + Fabric.js

This is just an extension of the other example.
Time to time, people ask about such interactive things. For example, an editor of prints on t-shirts :wink:
I haven’t worked with Fabric.js before, I just knew that it exists. :smile:
Today I’ve tried to combine two libraries to create a dynamic and (kind of) editable texture.
I hope, this topic will be a good start point for someone :beers:

https://jsfiddle.net/prisoner849/rr1bsfsj/show/

15 Likes

Sorry, I do not know if I can post a question in a resources section. As shown on the example, the text can be moved freely on the 3D item. I am using this mapping for a cloth as well, I am trying to limit the mapping to a rectangle on the cloth, how is that possible? Many thanks!

Something like that?

But working with Fabric.js is out of the scope of this forum.

1 Like

is there any resources like tutorial or something, or posts to move the fabricjs object directly from 3d object? currently i can select the object but i still figuring out how to move it

@naonao_naonvl and others, ZIM (JavaScript Canvas Framework) has just announced TextureActive which passes raycast x and y to ZIM to make interactive textures that are directly interactive on the material of the meshes. We added a resource link here ZIM TextureActives for Interactive Textures Cheers.

@danzen
Ah! Good old ZIM :slight_smile:

Nice, @prisoner849 - now the left hand panel can be inside three.js as a Plane - if desired. It would take about 5 minutes to do. The pseudo code (less some parameters) is:

  1. Make a const panel = new TextureActive() the panel size you want - add your existing Squiggle to it with its code.

  2. Then you make a const actives = new TextureActives(panel) object that controls all the TextureActive objects.

  3. Use const myMesh = three.makePanel(panel, actives); and scene.add(myMesh);

The makePanel() is a shortcut for when you want a Plane geometry. It has a built in curve parameter too which is pretty nice. The ZIM gets hidden in behind - but you can toggle to it with the T key (optional). See ZIM 015 - TextureActive Interface - Code Creativity as an example. Although, probably should continue this conversation over on the ZIM post. But good to hear from you again!

1 Like