do you know blender and threejs, 3D animation?
Hi @Zhu_Zhang - not really… a little… three.js okay but certainly not as well as many here. I work primarily in 2D.
where can I find a threejs developer?
FabricJS draws to a canvas. You can put your texture in that canvas, then apply fabric js on top of it, then use that canvas as a CanvasTexture on your model…
This is predicated on having a UV map for the object that works… I.e. is aligned with the viewport, not flipped or laid out weird…
You also have to map the cursor input based on the raycast…
the raycast returns the UV coordinate of the ray hit, so you would feed that into fabricJS mouse handler to drive its controls.
Yes that’s pretty much it, Nice info! but to whom this answer are u replying to?
usually just post a new thread would do.
I’m replying to everyone in the thread to provide more context for the implementation.
1 Like
hi
I have a project written with fabricjs. now I want to add and use some threejs’ objects in it. can you explain to 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 unified interactive environment with objects of two types that all follow the roles simultaneously.
u might need a button to deactivate fabric canvas raycast imo, so that u can toggle between selecting threejs and fabricjs object. i think by combining the raycast demo with this example should do the work
1 Like
probably it seems idiotic, but I’ve been taking a lot of time on fabricjs for a project that mostly needs 2d objects on Canvas. Recently I’ve got started to compare fabricjs and threejs. it seems threejs adding to having powerful 3d tools, has all 2d tools maybe more complete than fabricjs.
Did I waste my time working on fabricjs?
not so sure about your issue there, but if u want more reliable 2d canvas u can try https://zimjs.com/ and ask Dr. abstract @danzen
2 Likes
I mean, that for a project that needs more 2Ds and fewer 3Ds, using threejs can lead to having it both ways because it encompasses all kinds of objects, so you don’t have to mess with multiple libraries.
I took a look at Zimjs, seems to have more shape types and features. it is worth checking out.
1 Like
We just made a demo for someone at Transform control for control image,pos,scale,rotation - #7 by danzen - if you have something specific in mind, we perhaps could make a demo for you as well. That link also has various reference links. Cheers.
it’s worth checking his youtube also https://www.youtube.com/@ZIMLEARN some great things to learn there
was checking this, it’s really good compare to our last demo. Is it possible to have custom actions around the corner like this?
I have some work with Fabricjs that should be done. then I am thrilled to go over Zim and also threejs combination.
You can move this code into the TextureActive example. Note that we use ZIM Pizzazz to get the icons so you will also need to import that:
import zim from "https://zimjs.org/cdn/016/zim_three";
import piz from "https://zimjs.org/cdn/016/zim_pizzazz";
that’s neat! will try once i’m free, i was planning on recreating my 3d configurator using ZIM but just got stuck on my current workflow with fabricjs
1 Like