# 3D Cloth Material

Builds woven cloth in Three.js with weave normals, sheen and folds.

- Repository: https://github.com/MengTo/Skills (7170 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add MengTo/Skills --skill 3d-cloth-material -g -a claude-code -y`
Codex: `npx skills add MengTo/Skills --skill 3d-cloth-material -g -a codex -y`
Cursor: `npx skills add MengTo/Skills --skill 3d-cloth-material -g -a cursor -y`
Gemini CLI: `npx skills add MengTo/Skills --skill 3d-cloth-material -g -a gemini-cli -y`

## Description

Build convincing woven cloth in Three.js, with a thread-level weave normal map, sheen and anisotropic highlights, folds that never stretch the texture, hems with thickness, stitches, seams, frayed edges, fold occlusion, dye and wear variation, and light passing through thin fabric. Use for linen, silk, wool, canvas, curtains, banners, cloaks, tablecloths, tapestries or any 3D drape that currently looks like a plastic sheet, a stretched texture, or a flat coloured plane.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 3D Cloth Material

**Mechanism:** hang the cloth as rows whose *tangent angle* is the fold signal, so arc length equals the rest coordinate `s` and the weave never stretches. Then let a thread-level weave, sheen, hem thickness and light through the gaps do the reading of "fabric".

Nearest neighbours: `3d-high-resolution-textures` chooses texel density, mipmaps and delivery for any material; use it for the budget and stay here for what makes *cloth* different (weave interlacement, folds, sheen, hems). `3d-wood-material`, `3d-paper-material` and `3d-metal-material` cover their own surfaces; this skill owns woven and sewn fabric only. It is not a cloth *simulation*: for a character's flowing cape or a flag that collides, simulate (Verlet or Blender cloth) and bake, then keep the material rules below.

Extracted from KIBORI 木彫, a dark WebGL workshop where a roll of indigo canvas (the dōgu-maki) lies under a warm key light and had to survive a macro close-up. Ported from there: the weave bake, the stitch shader, half-circle hem turn-under, wear on thread tops, the sheen constants. Newly built for this skill (Kibori has one indigo canvas, not three fabrics): the tangent-angle fold curve, satin and twill interlacements, silk/wool/linen tables, tabs on the rod, raw-edge fray, fold AO, backlit transmission, wind. `demo.html` is the reference.

Demo: Three.js r169 · WebGL · GLSL (`MeshPhysicalMaterial` + `onBeforeCompile`), vanilla JavaScript, no post chain.

## The rules, each with the failure it prevents

The rest: https://github.com/MengTo/Skills/blob/HEAD/agent-skills/3d/3d-cloth-material/SKILL.md