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

Resources
1

The codebase for this is from this post by 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 :laughing:.

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 it was done by combining this example with this repo.

You can get the code here or try playing around with it on codepen.

Thank’s to 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.

4 Likes
2

This is simply cool! :+1:

2 Likes
3

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

4

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

5

Hello,
can you please repo of final product ?
I am very confused about how you added fabric.js objects controllers on 3d model.
please help me.
thanks for reading my reply.

6

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

8

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

9

wdym by controllers here?

10

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

11

image
image950×531 6.38 KB

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

example

// 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

12

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
discourse1453×515 53.6 KB

13

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

1 Like
14

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

2 Likes
15

thanks for your help

16

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
dis new900×602 4.8 KB

error is :
fabric.min.js:1 Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state.

17

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

18

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

1 Like
19

hello,
at line no. 72, cnvs variable is not declared, how it is working?
(I also saw this thing in this examples code: JSFiddle)

21

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

22

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