Member Avatar for virspy

Hi ,
this is shafi,

i want small help

here is the sample site

http://www.tailorstore.com/in/en/tailor-made-shirts

in this site he is using 3D model and loading fabric ... and i want help like how is loading fabric ... and it should without any 3d softewere... how we can do it... cn u helpme..

  • 3 Contributors
  • 3 Replies
  • 120 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

Thread starter asked how sites like TailorStore apply fabric swatches without "3D software". was correct to point at JavaScript/AJAX and noted the old Flash+PHP pattern. Today the same effect is normally done client-side with HTML5 (Canvas/SVG/CSS) or, for more realism, lightweight WebGL — no full 3D modelling tools required.

A simple, reliable pattern is tiling + masking. Create a small seamless texture (repeatable image) and a silhouette/mask for the garment (PNG alpha or SVG path). Either use CSS/SVG masking for basic swaps or draw the tiled texture into a Canvas and clip it to the silhouette using compositing. This lets swatches change instantly, uses small assets, and works well on mobile. For richer lighting and folds, a WebGL plane or low-poly mesh with texture + normal maps gives a 3D-like result without creating models in dedicated 3D apps.

Example Canvas workflow (tile texture, then mask):

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const tex = new Image();
const mask = new Image();
tex.crossOrigin = 'Anonymous';
mask.crossOrigin = 'Anonymous';
tex.src = 'fabric.png';
mask.src = 'shirt-mask.png';

tex.onload = () => {
  const pattern = ctx.createPattern(tex, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.globalCompositeOperation = 'destination-in';
  ctx.drawImage(mask, 0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = 'source-over';
};

Practical tips: make textures small and seamless, use power-of-two sizes if using WebGL, serve images with proper CORS headers for canvas/WebGL, cache swatches or use sprite atlases to reduce requests, and consider server-side pre-render (ImageMagick/GD) as a fallback for old browsers. Reference docs: Canvas API, WebGL API, and libraries like three.js or PixiJS.

Recommended Answers

All 3 Replies

Member Avatar for sourcez

I think you're more likely to want javascript or ajax for this, PHP would require page reloads to achieve that effect.

The other option is to use a flash preview, but I'm afraid I'm not too sure on that.

Member Avatar for virspy

Thanks For the quick reply

but i require more clear information on this
can any one please

Thanks in advance

Member Avatar for Member #334542

Hi,

Flash is the perfect one for these kind of tools. The same tool is already developed in many sites with the help of FLASH,PHP and MySQL. Let I will explain you generally how we can do this:

1. MYSQL is one of the dbms software that we can store datas. In our scenario, we can store all details about the fabrics. For example, maintaining Fabric id, item name, thumbnail image path, big image path, date, time etc.
So the conclusion is the details about everything is stored in database.

2. PHP is one of the software that we can develop many web oriented development things like loading fabric item details from the database and display it for the user.

3. The option buttons, categories, collor systems and whole interface is designed in flash and show to the user in a more animated and attractive way.

Let I will explain the communication:

Flash (Interface Designed) -> PHP (collecting details from database and send it to flash to display the things more attractively) -> MYSQL (details about everything)

This is the way that tool is created. But your sample showing that was created with the help of some other things like JavaScript, database, JQery, PHP and CSS.

Hope this helps!

Edited by Member #334542 because: Comment Added
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.