Cloth

1"use client"
2 
3import * as React from "react"
4import { useFrame } from "@react-three/fiber"
5import * as THREE from "three"
6 
7import {
8  SceneContainer,
9  type SceneContainerProps,
10} from "@/components/threecn/scene-container"
11import {
12  useShadcnTheme,
13  type ThemeMode,
14} from "@/components/hooks/use-shadcn-theme"
15 
16const WIDTH = 4.2
17const HEIGHT = 3
18const DAMPING = 0.97
19const ITERATIONS = 4
20 
21type ClothSim = {
22  positions: Float32Array
23  colors: Float32Array
24  indices: Uint32Array
25  pinned: Uint8Array
26  homeX: Float32Array
27  homeY: Float32Array
28  cA: Uint32Array
29  cB: Uint32Array
30  cRest: Float32Array
31  cols: number
32  rows: number
33}
34 
35function buildCloth(segments: number): ClothSim {
36  const cols = segments + 1
37  const rows = segments + 1
38  const n = cols * rows
39  const positions = new Float32Array(n * 3)
40  const colors = new Float32Array(n * 3)
41  const pinned = new Uint8Array(n)
42  const homeX = new Float32Array(n)
43  const homeY = new Float32Array(n)
44 
45  for (let v = 0; v < rows; v++) {
46    for (let u = 0; u < cols; u++) {
47      const i = v * cols + u
48      const x = (u / segments - 0.5) * WIDTH
49      const y = (0.5 - v / segments) * HEIGHT
50      positions[i * 3] = x
51      positions[i * 3 + 1] = y
52      positions[i * 3 + 2] = 0
53      homeX[i] = x
54      homeY[i] = y
55      if (v === 0) pinned[i] = 1 // top row hangs the cloth
56    }
57  }
58 
59  // Structural constraints: each particle links to its right and lower neighbor.
60  const restX = WIDTH / segments
61  const restY = HEIGHT / segments
62  const cA: number[] = []
63  const cB: number[] = []
64  const cRest: number[] = []
65  for (let v = 0; v < rows; v++) {
66    for (let u = 0; u < cols; u++) {
67      const i = v * cols + u
68      if (u < cols - 1) {
69        cA.push(i)
70        cB.push(i + 1)
71        cRest.push(restX)
72      }
73      if (v < rows - 1) {
74        cA.push(i)
75        cB.push(i + cols)
76        cRest.push(restY)
77      }
78    }
79  }
80 
81  // Two triangles per cell.
82  const indices = new Uint32Array(segments * segments * 6)
83  let o = 0
84  for (let v = 0; v < segments; v++) {
85    for (let u = 0; u < segments; u++) {
86      const a = v * cols + u
87      const b = a + 1
88      const c = a + cols
89      const d = c + 1
90      indices[o++] = a
91      indices[o++] = c
92      indices[o++] = b
93      indices[o++] = b
94      indices[o++] = c
95      indices[o++] = d
96    }
97  }
98 
99  return {
100    positions,
101    colors,
102    indices,
103    pinned,
104    homeX,
105    homeY,
106    cA: Uint32Array.from(cA),
107    cB: Uint32Array.from(cB),
108// … truncated