Live App

HAS Cloth Sim

A real-time cloth physics simulator powered by Three.js with Verlet integration, self-collision detection, texture mapping, webcam input, and interactive drag.

Three.js Verlet Physics WebGL Self-Collision Real-Time

↗ Launch App ⚙ How It Works ▧ Features

Year 2026

Type Web App

Status ● Live

001 Overview

A physically accurate cloth simulation running entirely in the browser. The fabric is modeled as a particle-spring system using Verlet integration for stability. Structural, shear, and bending constraints maintain the cloth’s shape while a spatial-hash self-collision system prevents the fabric from passing through itself. Drag, orbit, zoom, and apply textures, images, video, or your webcam feed directly onto the cloth surface.

002 How It Works

Particle Grid

The cloth is a grid of particles connected by spring constraints. Each particle stores position, previous position, and acceleration. The resolution slider controls grid density from 10×10 to 60×60 vertices.

Verlet Integration

Position-based dynamics using Verlet integration — no explicit velocity storage. The current position is updated from the difference between current and previous positions, plus accumulated forces. This provides inherent damping and stability.

Constraint Solving

Three types of constraints keep the cloth intact: structural (adjacent neighbors), shear (diagonal neighbors), and bending (skip-one neighbors). Fifteen Gauss-Seidel iterations per frame resolve overlapping corrections.

Self-Collision

A spatial hash divides world space into cells. Each particle is bucketed by cell, and only particles sharing a cell or its 26 neighbors are tested for overlap — catching folds regardless of grid distance with minimal computation.

Drag Interaction

Raycasting against the cloth mesh finds the nearest unpinned particle to the cursor. That particle is locked to the projected mouse position while dragging. Alt+drag orbits the camera, scroll zooms in and out.

Texture Mapping

UV coordinates map media onto the cloth surface. Images load as static textures, videos update per-frame via VideoTexture, and webcam streams map live camera feed. A crop-fit algorithm adjusts UV repeat and offset to match the cloth aspect ratio.

003 Features

7 Physics Controls

Gravity, damping, stiffness, wind X/Z, turbulence scale, and turbulence frequency — all adjustable in real time. 3D noise drives spatially coherent turbulence across the cloth surface.

6 Pin Presets

Switch between 2 Corners, Top Row, 4 Corners, Wave, Curtain, and Free Fall. Each preset pins different particles to create hanging, draped, or floating cloth behaviors.

Webcam + Video

Map your webcam feed or any video file directly onto the cloth. The texture automatically crop-fits to match the cloth’s aspect ratio. Play, pause, and reset video playback from the sidebar.

6 Aspect Ratios

Instantly reshape the cloth to 1:1, 2:3, 3:2, 4:5, 9:16, or 16:9. The entire particle grid rebuilds to match, and video textures re-fit automatically.