# Three.js + Fabric.js but with mouse and touch raycast

**URL:** <https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578>\
**Category:** Resources\
**Tags:** textures\
**Created:** [February 7, 2022, 9:04am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578 "2022-02-07T09:04:05Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [February 7, 2022, 9:04am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/1 "2022-02-07T09:04:05Z")

</div>

The codebase for this is from this [post](https://discourse.threejs.org/t/three-js-fabric-js/2111) by [prisoner849](https://discourse.threejs.org/u/prisoner849) i added a feature where u can drag, scale, and rotate the fabricjs object directly from threejs 3d model, so you don’t need do that from the fabricjs canvas, just hide it 😆.

I’ve been developing this for a while now, since i put a lot of time and money into this hope someone will find this helpful. Final product of this you can access it [here](https://jersey-designer.netlify.app/) it was done by combining [this example](https://discourse.threejs.org/t/three-js-fabric-js/2111) with this [repo](https://github.com/devramkumardnagarajan/3d-Tshirt-design).

You can get the code [here](https://github.com/naonvl/threejs-fabricjs-raycast) or try playing around with it on [codepen](https://codepen.io/naonvl/pen/OJObYBe).

Thank’s to [prisoner849](https://discourse.threejs.org/u/prisoner849) for the example.

Since it’s really old version of fabricjs, i wanted to make it work using newer version but i couldn’t make it, so if anyone have an idea to make it work, please reply here or discuss it on fabricjs issue [here](https://github.com/fabricjs/fabric.js/issues/7648).

---

<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:** [February 7, 2022, 9:18am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/2 "2022-02-07T09:18:05Z")

</div>

This is simply cool! 👍

---

<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:** [February 7, 2022, 9:19am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/3 "2022-02-07T09:19:51Z")

</div>

Thanks, also if u have any idea how to make it work on newer version pls let me know 😁. I’ve tried using 4.2 and 4.6 it didn’t work, i can select the object but i can’t move it

---

<div class="post-metadata">

**Author:** ![hanswurst](https://avatars.discourse-cdn.com/v4/letter/h/839c29/32.png) [@hanswurst](https://discourse.threejs.org/u/hanswurst)\
**Post date:** [April 5, 2022, 8:11pm UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/4 "2022-04-05T20:11:59Z")

</div>

Hi! i am a also working on a 3d model mapping demo. I study art at the ZKM institute in Karlsruhe/Germany. My idea: Let us work together on your technical obsolete script to get the functionality with the latest frameworks. We can do this in a private git repo. Please get in contact with me is this sounds interesting for you. Rico

---

<div class="post-metadata">

**Author:** ![Sohail\_Ansari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sohail_ansari/32/26312_2.png) [@Sohail\_Ansari](https://discourse.threejs.org/u/Sohail_Ansari)\
**Post date:** [June 11, 2022, 1:01pm UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/5 "2022-06-11T13:01:32Z")

</div>

Hello,  
can you please repo of [final product](https://jersey-designer.netlify.app/) ?  
I am very confused about how you added fabric.js objects controllers on 3d model.  
please help me.  
thanks for reading my reply.

---

<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:** [June 11, 2022, 2:53pm UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/6 "2022-06-11T14:53:46Z")

</div>

Hey, i’m sorry i can’t disclose the source code to the public since it’s both mine and client’s property

---

<div class="post-metadata">

**Author:** ![Sohail\_Ansari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sohail_ansari/32/26312_2.png) [@Sohail\_Ansari](https://discourse.threejs.org/u/Sohail_Ansari)\
**Post date:** [June 11, 2022, 6:07pm UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/8 "2022-06-11T18:07:56Z")

</div>

hi, thanks for your reply.  
can you please tell me how added fabric.js objects with controllers on 3D model?

---

<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:** [June 12, 2022, 3:04am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/9 "2022-06-12T03:04:31Z")

</div>

> [@Sohail\_Ansari](#):
>
> controllers

wdym by controllers here?

---

<div class="post-metadata">

**Author:** ![Sohail\_Ansari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sohail_ansari/32/26312_2.png) [@Sohail\_Ansari](https://discourse.threejs.org/u/Sohail_Ansari)\
**Post date:** [June 12, 2022, 12:23pm UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/10 "2022-06-12T12:23:34Z")

</div>

controllers to increase and decrease the shape of fabric objects on 3d object.  
thank you so much for your reply.

---

<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:** [June 13, 2022, 1:09am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/11 "2022-06-13T01:09:36Z")

</div>

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/f/ff931fd1b2fe54c5cf8407f16312e3eee7f7ed89.png)

It was pretty simple, you could bind these form input to your fabricjs object.

example

```nohighlight
// get current object
let currText; //input text on click
$.each(canvas.getObjects(), (object)=>{
    if(object.text == currText){
       canvas.setActiveObject(object);
       //or set scale of the text
      object.scaleY;
      object.scaleX;
     //or change the text on input
   }
})

```

but if you want to interact directly on the 3d model, that might be a little hard since you need to patch the fabricjs through `fabric.prototype`

---

<div class="post-metadata">

**Author:** ![Sohail\_Ansari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sohail_ansari/32/26312_2.png) [@Sohail\_Ansari](https://discourse.threejs.org/u/Sohail_Ansari)\
**Post date:** [June 13, 2022, 5:18am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/12 "2022-06-13T05:18:54Z")

</div>

thanks, I was talking about how you added fabric js objects controller om 3d object.  
can you please tell me how you did it or give me some references to do it?

 ![discourse1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/a/da7d59abe5d3b9d17ddef45ab80146d998571593.png)

---

<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:** [June 13, 2022, 7:17am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/13 "2022-06-13T07:17:14Z")

</div>

[https://codepen.io/naonvl/pen/OJObYBe?editors=0010](https://codepen.io/naonvl/pen/OJObYBe?editors=0010) on line 104, you can use this patch for raycasting threejs to fabricjs canvas

---

<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:** [June 13, 2022, 7:18am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/14 "2022-06-13T07:18:26Z")

</div>

all the necessary thing that i used for my customizer are present in the codepen so take a look at the code

---

<div class="post-metadata">

**Author:** ![Sohail\_Ansari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sohail_ansari/32/26312_2.png) [@Sohail\_Ansari](https://discourse.threejs.org/u/Sohail_Ansari)\
**Post date:** [June 13, 2022, 7:31am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/15 "2022-06-13T07:31:41Z")

</div>

thanks for your help

---

<div class="post-metadata">

**Author:** ![Sohail\_Ansari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sohail_ansari/32/26312_2.png) [@Sohail\_Ansari](https://discourse.threejs.org/u/Sohail_Ansari)\
**Post date:** [June 14, 2022, 5:20am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/16 "2022-06-14T05:20:14Z")

</div>

hi again,  
I am getting this error, I am not sure that code is working properly(because sometimes, I can see a yellow 3D plane and sometimes not).

 ![dis new](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/b/ab2c531059ae74529568ce2d9cf02831ed0ade18.png)  
error is :  
fabric.min.js:1 Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state.

---

<div class="post-metadata">

**Author:** ![Sohail\_Ansari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sohail_ansari/32/26312_2.png) [@Sohail\_Ansari](https://discourse.threejs.org/u/Sohail_Ansari)\
**Post date:** [June 14, 2022, 5:52am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/17 "2022-06-14T05:52:47Z")

</div>

when I click on yellow mesh, its generating this error:  
fabric.min.js:1 Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state

---

<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:** [June 14, 2022, 7:57am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/18 "2022-06-14T07:57:05Z")

</div>

hmm, i haven’t touch the code again.Try changing the fabricjs version, that might help

---

<div class="post-metadata">

**Author:** ![Sohail\_Ansari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sohail_ansari/32/26312_2.png) [@Sohail\_Ansari](https://discourse.threejs.org/u/Sohail_Ansari)\
**Post date:** [June 14, 2022, 8:51am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/19 "2022-06-14T08:51:30Z")

</div>

hello,  
at line no. 72, cnvs variable is not declared, how it is working?  
(I also saw this thing in this examples code: [JSFiddle](https://jsfiddle.net/prisoner849/rr1bsfsj/show/))

---

<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:** [June 14, 2022, 11:15am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/21 "2022-06-14T11:15:48Z")

</div>

> [@naonao\_naonvl](#):
>
> [https://codepen.io/naonvl/pen/OJObYBe?editors=0010](https://codepen.io/naonvl/pen/OJObYBe?editors=0010)

That example, add this my fabricjs patch [https://codepen.io/naonvl/pen/OJObYBe?editors=0010](https://codepen.io/naonvl/pen/OJObYBe?editors=0010) then add raycast

---

<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:** [June 14, 2022, 11:16am UTC](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578/22 "2022-06-14T11:16:34Z")

</div>

aah i see, so it’s working on newer version now?

[Next page](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578.md?page=2)