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 
I haven’t worked with Fabric.js before, I just knew that it exists. 
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 
14 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 
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:
-
Make a const panel = new TextureActive() the panel size you want - add your existing Squiggle to it with its code.
-
Then you make a const actives = new TextureActives(panel) object that controls all the TextureActive objects.
-
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
Hello
I have a project written with fabricjs. recently I got some needs to create and use some threejs’ objects in it. can you get me a solution or code to do this?
in this way can I do all normal operations like select, drag, resize, etc with both fabric and threejs objects in a way that two object types have interaction with each other like detecting collisions? also throughout some actions like zoom in and out should react similarly.
in conclusion, the project should look like a single canvas with objects of two types that all follow the roles simultaneously.
very good topic. Maybe even use physics to create clothes, with the WASM ammo
https://pybullet.org/Bullet/phpBB3/viewtopic.php?t=12724