Sportswear Design Configurator

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.


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;


	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 ] 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, );
    return that.raycaster.intersectObjects( objects );

	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: 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,

  1. Create canvas for fabricjs then map it as texture
  2. Place and lock SVG for design pattern which user can change the colors of it
  3. 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?