Skip to content
Get packs

3D Cloth Material

Makes Three.js cloth look like real woven fabric: weave, sheen, folds, hems and light through thin fabric.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When this skill is installed, the agent knows how to build realistic woven fabric (linen, silk, wool, canvas, curtains and similar) in the Three.js 3D library for web pages. It describes how to generate a thread-level weave texture, sheen and anisotropic highlights, folds that do not stretch the texture, hems with thickness, stitching, frayed raw edges, and light passing through thin cloth. It is a rendering guide rather than a physics simulation, and it points to a reference demo file.

Great for

  • Front-end developers building 3D product, fashion or interior scenes in Three.js
  • Designers or artists who want a cloth material for WebGL demos and need the reasoning behind the settings
  • Developers who already have a cloth animation and want more convincing fabric surfaces

Skip it if

  • Real cloth physics or collision (flags, capes that must collide): the skill explicitly says it is not a simulation and you need a separate simulation step
  • Non-web 3D pipelines or game engines other than Three.js, since the rules and constants are specific to Three.js r169 and GLSL shader hooks
  • Non-developers looking for a ready-made 3D asset: the skill gives code guidance, not finished models or textures

Try asking

  • “Make this linen tablecloth look like real woven fabric in my Three.js scene, with soft folds and no stretched texture”
  • “Add a silk material with anisotropic highlights and a madder red warp to this curtain mesh”
  • “Give the hem of this wool cloak a visible thickness and stitching in the shader”
  • “Make a backlit cotton banner glow slightly where light passes through the thin fabric”
Step-by-step guide: how to use 3D Cloth MaterialInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    3d-cloth-material.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip 3d-cloth-material.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip 3d-cloth-material.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent the fabric type (linen, silk or wool) and the scene size so it can pick the correct constants table
  • Ask it to open demo.html as the reference implementation before changing the material code
  • Keep the fold angle below the limit the skill gives, and test the weave for shimmer while the cloth moves

What's inside

  • agents/openai.yaml
  • demo.html
  • PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.