# Three.js + Fabric.js

**URL:** <https://discourse.threejs.org/t/three-js-fabric-js/2111>\
**Category:** Resources\
**Tags:** textures\
**Created:** [March 13, 2018, 10:12pm UTC](https://discourse.threejs.org/t/three-js-fabric-js/2111 "2018-03-13T22:12:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 13, 2018, 10:12pm UTC](https://discourse.threejs.org/t/three-js-fabric-js/2111/1 "2018-03-13T22:12:30Z")

</div>

This is just an extension of the other [example](https://threejs.org/examples/webgl_materials_texture_canvas).  
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 🍻

[https://jsfiddle.net/prisoner849/rr1bsfsj/show/](https://jsfiddle.net/prisoner849/rr1bsfsj/show/)

 ![Three_and_Fabric](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/fa4f25f77e5d4962aa4cb4d90162931d2c0cd0dd.jpg)

---

<div class="post-metadata">

**Author:** ![hesamoy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hesamoy/32/3743_2.png) [@hesamoy](https://discourse.threejs.org/u/hesamoy)\
**Post date:** [January 10, 2021, 2:57pm UTC](https://discourse.threejs.org/t/three-js-fabric-js/2111/3 "2021-01-10T14:57:21Z")

</div>

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!

 ![Screen Shot 1399-10-21 at 18.31.11](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/1f536b06dc1c4d53c853a42125aa12e516c54ea3.jpeg)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 10, 2021, 3:56pm UTC](https://discourse.threejs.org/t/three-js-fabric-js/2111/4 "2021-01-10T15:56:25Z")

</div>

Something like that?

> <https://stackoverflow.com/questions/19979644/set-object-drag-limit-in-fabric-js>

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

---

<div class="post-metadata">

**Author:** ![naonao\_naonvl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/naonao_naonvl/32/20011_2.png) [@naonao\_naonvl](https://discourse.threejs.org/u/naonao_naonvl)\
**Post date:** [November 10, 2021, 7:26am UTC](https://discourse.threejs.org/t/three-js-fabric-js/2111/5 "2021-11-10T07:26:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [September 6, 2023, 8:04pm UTC](https://discourse.threejs.org/t/three-js-fabric-js/2111/6 "2023-09-06T20:04:14Z")

</div>

@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](https://discourse.threejs.org/t/zim-textureactives-for-interactive-textures/55746) Cheers.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [September 6, 2023, 9:22pm UTC](https://discourse.threejs.org/t/three-js-fabric-js/2111/7 "2023-09-06T21:22:23Z")

</div>

@danzen  
Ah! Good old ZIM 🙂

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/57b5c7fb920610e9bfeb6dd82aecf0e02e3c8eb5.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/57b5c7fb920610e9bfeb6dd82aecf0e02e3c8eb5.mp4)

---

<div class="post-metadata">

**Author:** ![danzen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/danzen/32/39322_2.png) [@danzen](https://discourse.threejs.org/u/danzen)\
**Post date:** [September 6, 2023, 11:26pm UTC](https://discourse.threejs.org/t/three-js-fabric-js/2111/8 "2023-09-06T23:26:24Z")

</div>

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](https://zimjs.com/015/textureactive.html) as an example. Although, probably should continue this conversation over on the ZIM post. But good to hear from you again!

---

<div class="post-metadata">

**Author:** ![gigstar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gigstar/32/46996_2.png) [@gigstar](https://discourse.threejs.org/u/gigstar)\
**Post date:** [April 20, 2024, 7:58pm UTC](https://discourse.threejs.org/t/three-js-fabric-js/2111/9 "2024-04-20T19:58:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![didi\_softwares](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didi_softwares/32/22686_2.png) [@didi\_softwares](https://discourse.threejs.org/u/didi_softwares)\
**Post date:** [April 20, 2024, 11:54pm UTC](https://discourse.threejs.org/t/three-js-fabric-js/2111/10 "2024-04-20T23:54:29Z")

</div>

very good topic. Maybe even use physics to create clothes, with the WASM ammo  
[https://pybullet.org/Bullet/phpBB3/viewtopic.php?t=12724](https://pybullet.org/Bullet/phpBB3/viewtopic.php?t=12724)