Our product design configurator is used to configure design of shirts, shorts, pants and jackets etc. by adding shapes, texts, and images on pattern of the product. This pattern is saved as vector (SVG) file in order to be used in production as is. Canvas is managed by a 2D vector library (fabric.js), and 3D model uses canvas as texture.
15 Likes
hi, do u know how to select fabricjs element directly from the 3d mesh?
Hello, the actual code has many unrelated and application specific stuff. But i can give a sample to tell about the main idea. I hope it helps.
The mouseup event will be listened on body or the div where 3D scene renders;
$("body").mouseup(that.onMouseUp);
this.onMouseUp=function(evt){
var pos={x:evt.clientX,y:evt.clientY}; // this may need to be offset by bounding rectangle of container dom
var intersects = that.getIntersects( pos, mesh.children );
if ( intersects.length > 0 && intersects[ 0 ].uv ) {
var uv = intersects[ 0 ].uv;
intersects[ 0 ].object.material.map.transformUv( uv );
var selected = getObjectUnderPoint(uv);
if(selected!=null) canvas.setActiveObject(selected);
}
}
this.getIntersects = function ( point, objects ) {
that.mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );
that.raycaster.setFromCamera(that.mouse, that.camera );
return that.raycaster.intersectObjects( objects );
};
getObjectUnderPoint=function(uv){
var cp = {x:uv.x*zoom,y:uv.y*zoom};
var objects = that.canvas.getObjects();
for(var i=0;i<objects.length;i++){ //loop through all objects in canvas
var obj = objects[i];
if(!that.canvas.containsPoint(null,obj,cp)) continue;
var isIntersecting = that.canvas.isTargetTransparent(obj,cp.x, cp.y) ;
if(isIntersecting) return obj;
}
return null;
}
1 Like
i’ll try to implement it with simple code, in the meantime, do you know owayo football jerseys custom made in our 3D Designer - Football jersey designer - Printed football jerseys what does that site r using for adding text etc? i’ve asked on the forum that i could use decal for that, but i didn’t find any related to that specific functionallity
thanks in advance
looks like a decal. akella has made a mini tutorial for making a basic configurator under 20 minutes: https://twitter.com/akella/status/1341811097905586178 though it’s missing decals, but otherwise it’s perfect.
i’ve tried that but i dont familiar with react, thanks for the reference tho. do u know if we can move fabricjs object directly from the 3d mesh?
yes, all it needs is a canvas. which in threejs you can form a texture with.
Yes you can move fabric.js objects. The above code was only selecting fabric.js objects by clicking on 3D mesh. It’s for finding the click position on texture, then find corresponding point on fabric.js canvas, then check whether that point meets any object by checking transparency. The next step should be tracking on mouse move. Lets say mouse moved 100 pixels in y direction, calculate every move position again on texture and move the fabric.js object according to that movement.
But, i personally do not like working on 3D mesh. It may be good on desktop, but never usable on mobile with fingers. Instead, I use big movement buttons to move the shapes. Up, down, right, left, rotation arrow buttons. These are easier to click on mobile. Working directly on 3D mesh is not something easy for regular internet user.
So this what i think will be working and suits my needs,
- Create canvas for fabricjs then map it as texture
- Place and lock SVG for design pattern which user can change the colors of it
- Place additional texts and images on top of SVG
i could do something like that on fabricjs right?
me personally prefer moving directly from the 3d mesh, since it’s more interesting to the user. Owayo sites have really nice performance adding some texts and images but it doesn’t slow down. But i think i’ll pass that feature for now, since i got no time left
Yes, you can do those in fabricjs. Since fabricjs is a vector based system, its cpu intensive computations slow down operations. The best is to work on bitmaps directly. That way it will be faster. Maybe owayo is working directly on texture (using bitmaps) instead of vector based system like fabricjs.
Or you can mix both, use bitmaps where it is possible, and from time to time map these bitmaps to corresponding vector ones. But if you don’t have much time, fabric.js would be a nice start for this.
hey i try this code, but i only get 1 object from fabricjs canvas, i have 3 objects, texture.png, pattern.svg and texts. but i only can select pattern.svg. eventhough i remove pattern.svg when i click the 3d model always return null. do u have any idea why?
You should firstly be sure that you’re getting the right uv point on texture (x,y). You should always print out the values on console.log to be sure you’re on the right direction.
When you’re sure that you got the correct uv coordinate, you can get help from fabric.js’s discussion boards.
You should also write corresponding canvas coordinates after every calculation on getObjectUnderPoint function. Probably there is something wrong with the calculations and on canvas.isTargetTransparent(obj,cp.x, cp.y) line you get incorrect values. maybe your x and y is just zero, or NaN.
var cp = {x:uv.x*zoom,y:uv.y*zoom};
may i know your zoom value is? my current development is i can add new text or images to the position that user specified by clicking the 3d object, just like you did, but still can’t select the fabricjs object.
also i set zoom value to 2
zoom is not a fixed value. it changes when user wants to resize canvas. You can firstly keep everyting in original size to make sure your calculations are correct. Then you can apply zoom later. You may need to multiply coordinates with some factors if your canvas size is nPot. Just watch the x,y coordinates at every step and decide what extra factors need to be added. You’ll find out the solution.
hi, i think i can select the object, but the problem is i can only select my texture, which is the svg. still can’t select other object like text or image,
and i think the problem is here
for (var i = 0; i < objects.length; i++) {
var obj = objects[i]; // i ONLY RETURNS VALUE OF 0
if (!canvas.containsPoint(null, obj, cp)) continue;
var isIntersecting = canvas.isTargetTransparent(obj, cp.x, cp.y);
if (isIntersecting) return obj;
}
i still can’t figure out why is it only returning 0 which only selecting the svg, do you have anyidea why?
Hi,
I am also trying to achieve something similar to this. Can you please guide me how can I create such a configurator?
Cool! Does your project based in three.js? Is it possible to convert svg with parts of t-shirt(left side panel) to 3d object(right side panel), like in your project? For example I have any svg file with parts of pants. I can edit length or others parameters in svg context and then to convers to 3d object. I mean to be able to edit clothes(change length, width etc) and not just change their color
I used fabric.js with three.js in combination. Once you have enough experience with javascript, three.js and fabric.js, it’s just trivial to combine these experiences together. If you’re familiar with html5 canvas, and if you don’t really need vector calculations, you can do your 2D part by only canvas, too. But i recommend using libraries like fabric.js to make things easier.
Yes, it’s using three.js for 3D and fabric.js for 2D (SVG). I use fabric.js to load SVG file and divide every parts of it. You can edit svg parts, but, when it comes to project them to 3D you’ll have a problem on UV map. If your fabric cutting pattern grows evenly in all directions on each size (S,M,L,XL…) then you can scale them. But generally patterns do not grow like that. So, you’ll need a 3D model for each size (S,M,L).
I only use M size and let the rest to production department of producer.
The basic idea is to show customer how their design will look like on the garnment. The output is not used directly on production unless the customer only needs M size.