How 3D Clothing Design Empowers Small Apparel Makers: From Research to Demo

Research Background

Current global apparel manufacturing chains make it difficult for Chinese small‑and‑medium enterprises to participate in high‑profit stages such as design and R&D because of high difficulty and cost. 3D clothing design offers a solution by allowing virtual sampling, rapid iteration, and online delivery, dramatically reducing time and skill barriers.

Tmall Trend Center – 3D Planning

The Tmall Trend Center uses massive data and AI algorithms to forecast trends six months ahead. Its 3D planning feature renders garments on virtual models, giving merchants a more intuitive and detailed way to select styles.

Existing Product Survey

Major 3D clothing design software includes Marvelous Designer and CLO3D from Korea’s CLO Virtual Fashion, and the domestic Style3D from Lingdi Technology.

Marvelous Designer

Developed in 2009, it is the most renowned tool for realistic garment simulation, primarily serving the game and animation industries.

CLO3D

Released in 2010, it focuses on fashion and apparel, offering seamless conversion between virtual and physical garments and exporting production data directly to manufacturers.

Style3D

Provides two applications: Style3D Studio (desktop) and Style3D Cloud (Web). Studio offers flexible dynamic simulation, 2D‑3D synchronization, and production data export. Cloud delivers 3D style management, resource libraries, and simple customization such as fabric swapping and pattern addition.

Product Comparison

Comparison of four products (Marvelous Designer, CLO3D, Style3D Studio, Style3D Cloud) covering hardware requirements, pricing, fabric simulation quality, virtual model support, and production data export capabilities.

Challenges

Algorithm modeling

Key technologies

Material foundation

Algorithm Modeling

Realistic cloth simulation requires accurate fabric modeling, which is a difficult research area in computer graphics due to complex internal forces and collision handling.

Cloth Simulation Modeling

Three categories exist: geometric models, physical models, and hybrid models.

Geometric model – uses vertices and polygons, suitable for static scenes, low computational cost but cannot display dynamic behavior.

Physical model – mainstream approach based on mass‑spring systems, introducing mass, forces, and physics into the simulation.

Hybrid model – combines geometric and physical methods but has not yet achieved ideal results.

Mass‑Spring Model

The cloth is treated as discrete mass points connected by springs. Dynamics are computed by solving differential equations (e.g., via Euler integration) for each point’s position, velocity, and acceleration.

Collision Detection

A two‑stage approach uses simple bounding volumes (spheres, boxes) to quickly reject non‑colliding regions, then performs detailed per‑point analysis only for objects inside the bounding volume, greatly reducing computation.

Key Technologies

Cutting and sewing simulation to assemble fabric pieces with realistic seams.

2D pattern – 3D model synchronization to keep design data consistent.

Fit checking to ensure garments conform to human body shapes.

Material Foundation

Clothing model library.

Fabric library with high‑resolution textures and physical properties.

Virtual model library offering diverse body types for preview.

Technical Solution Practice

The proposed solution focuses on two core requirements for small merchants: 3D rendering of garments and simple customization (fabric replacement, pattern addition). Full dynamic modeling is omitted; pre‑modeled assets are loaded and modified.

Technical Architecture

Models are stored in glTF format (JSON descriptor, .bin geometry/animation data, and texture files). Models are downloaded via the browser; optional Draco compression reduces file size. Rendering is performed with Three.js.

Model Loading

<code>// Initialize parameters
let modelObj;
let scene = new THREE.Scene();
// Load external glTF model
function loadGLTFModel(modelPath, modelName) {
  const loader = new GLTFLoader();
  // If the model is Draco‑compressed, add a DRACOLoader
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath('/examples/js/libs/draco/');
  loader.setDRACOLoader(dracoLoader);
  loader.load(modelPath, function (gltf) {
    // Add the loaded scene to the current scene
    scene.add(gltf.scene);
    // Retrieve the clothing model
    modelObj = scene.getObjectByName(modelName);
  });
}</code>

Model Rendering

Three.js represents geometry as vertices and triangles. Each vertex has a position (x, y, z) and texture coordinates (u, v). Materials define how geometry interacts with light and can include texture maps. Geometry + Material form a Mesh; multiple meshes compose a model, which is placed in a Scene and viewed through a Camera.

Fabric Replacement

<code>// Initialize parameters
let modelObj;
// Replace model texture
function changeTexture(texturePath) {
  let ImageLoader = new THREE.ImageLoader();
  // Load image from the given path
  ImageLoader.load(
    texturePath,
    function (image) {
      // Replace texture for all meshes of the clothing model
      modelObj.children.forEach((mesh) => {
        mesh.material.map.image = image;
        mesh.material.map.needsUpdate = true;
      });
    }
  );
}
</code>

Pattern Adding

Mouse coordinates are transformed to normalized device coordinates, then a

THREE.Raycaster

casts a ray from the camera to detect intersections with the garment mesh. When an intersection is found,

THREE.DecalGeometry

creates a decal (pattern) that conforms to the surface.

<code>// Intersection detection
let modelObj, selectedMesh;
const raycaster = new THREE.Raycaster();
const intersection = { intersects: false, point: new THREE.Vector3(), normal: new THREE.Vector3() };
const mouse = new THREE.Vector2();
const intersects = [];
function checkIntersection(x, y) {
  if (!modelObj) return;
  mouse.x = (x / window.innerWidth) * 2 - 1;
  mouse.y = -(y / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  raycaster.intersectObjects(modelObj.children, false, intersects);
  if (intersects.length > 0) {
    let res = intersects.filter((res) => res && res.object)[0];
    selectedMesh = res.object;
    const point = intersects[0].point;
    intersection.point.copy(point);
    intersection.normal.copy(intersects[0].face.normal);
    intersection.intersects = true;
    intersects.length = 0;
  } else {
    intersection.intersects = false;
  }
}
</code>

<code>// Adding a decal (pattern)
const textureLoader = new THREE.TextureLoader();
const decalTexturePath = '/path/to/texture/';
const decalDiffuse = textureLoader.load(decalTexturePath);
const decalMaterial = new THREE.MeshPhongMaterial({
  map: decalDiffuse,
  normalScale: new THREE.Vector2(1, 1),
  shininess: 30,
  transparent: true,
  depthTest: true,
  depthWrite: false,
  polygonOffset: true,
  polygonOffsetFactor: -4,
  wireframe: false,
  side: THREE.FrontSide,
});
const decals = [];
const decalParams = {
  position: new THREE.Vector3(),
  orientation: new THREE.Euler(),
  minScale: 0.1,
  maxScale: 0.2,
  size: new THREE.Vector3(10, 10, 10),
};
function addDecal() {
  decalParams.position.copy(intersection.point);
  decalParams.orientation.copy(mouseHelper.rotation);
  decalParams.scale =
    decalParams.minScale +
    Math.random() * (decalParams.maxScale - decalParams.minScale);
  decalParams.size.set(decalParams.scale, decalParams.scale, decalParams.scale);
  const material = decalMaterial.clone();
  const decal = new THREE.Mesh(
    new DecalGeometry(
      selectedMesh,
      decalParams.position,
      decalParams.orientation,
      decalParams.size
    ),
    material
  );
  decals.push(decal);
  scene.add(decal);
}
function removeDecals() {
  decals.forEach((decal) => {
    scene.remove(decal);
  });
  decals.length = 0;
}
</code>

Conclusion and Outlook

The article surveys the background, existing tools, challenges, and presents a Three.js demo with fabric swapping and decal addition. Future work will refine the demo into an engineered product, enabling fast style selection, customization, and potential consumer‑facing applications such as virtual try‑on.

References

Ng, Hing N., and Richard L. Grimsdale. "Computer graphics techniques for modeling cloth." IEEE Computer Graphics and Applications 16.5 (1996): 28‑41.

Cloth flexible simulation technology: https://www.docin.com/p-1154834190.html

Zhuanlan Zhihu – Cloth simulation principles: https://zhuanlan.zhihu.com/p/139428185

Style3D: https://home.style3d.com/

CLO3D: https://www.clo3d.com/

Marvelous Designer: https://www.marvelousdesigner.com/