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 .
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.
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.
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
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
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.
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
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?
error is :
fabric.min.js:1 Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The HTMLImageElement provided is in the ‘broken’ state.
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