Cloth.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. /*
  2. * Cloth Simulation using a relaxed constraints solver
  3. */
  4. // Suggested Readings
  5. // Advanced Character Physics by Thomas Jakobsen Character
  6. // http://freespace.virgin.net/hugo.elias/models/m_cloth.htm
  7. // http://en.wikipedia.org/wiki/Cloth_modeling
  8. // http://cg.alexandra.dk/tag/spring-mass-system/
  9. // Real-time Cloth Animation http://www.darwin3d.com/gamedev/articles/col0599.pdf
  10. var DAMPING = 0.03;
  11. var DRAG = 1 - DAMPING;
  12. var MASS = 0.1;
  13. var restDistance = 25;
  14. var xSegs = 10;
  15. var ySegs = 10;
  16. var clothFunction = plane( restDistance * xSegs, restDistance * ySegs );
  17. var cloth = new Cloth( xSegs, ySegs );
  18. var GRAVITY = 981 * 1.4;
  19. var gravity = new THREE.Vector3( 0, - GRAVITY, 0 ).multiplyScalar( MASS );
  20. var TIMESTEP = 18 / 1000;
  21. var TIMESTEP_SQ = TIMESTEP * TIMESTEP;
  22. var pins = [];
  23. var wind = true;
  24. var windStrength = 2;
  25. var windForce = new THREE.Vector3( 0, 0, 0 );
  26. var ballPosition = new THREE.Vector3( 0, - 45, 0 );
  27. var ballSize = 60; //40
  28. var tmpForce = new THREE.Vector3();
  29. var lastTime;
  30. function plane( width, height ) {
  31. return function ( u, v, target ) {
  32. var x = ( u - 0.5 ) * width;
  33. var y = ( v + 0.5 ) * height;
  34. var z = 0;
  35. target.set( x, y, z );
  36. };
  37. }
  38. function Particle( x, y, z, mass ) {
  39. this.position = new THREE.Vector3();
  40. this.previous = new THREE.Vector3();
  41. this.original = new THREE.Vector3();
  42. this.a = new THREE.Vector3( 0, 0, 0 ); // acceleration
  43. this.mass = mass;
  44. this.invMass = 1 / mass;
  45. this.tmp = new THREE.Vector3();
  46. this.tmp2 = new THREE.Vector3();
  47. // init
  48. clothFunction( x, y, this.position ); // position
  49. clothFunction( x, y, this.previous ); // previous
  50. clothFunction( x, y, this.original );
  51. }
  52. // Force -> Acceleration
  53. Particle.prototype.addForce = function ( force ) {
  54. this.a.add(
  55. this.tmp2.copy( force ).multiplyScalar( this.invMass )
  56. );
  57. };
  58. // Performs Verlet integration
  59. Particle.prototype.integrate = function ( timesq ) {
  60. var newPos = this.tmp.subVectors( this.position, this.previous );
  61. newPos.multiplyScalar( DRAG ).add( this.position );
  62. newPos.add( this.a.multiplyScalar( timesq ) );
  63. this.tmp = this.previous;
  64. this.previous = this.position;
  65. this.position = newPos;
  66. this.a.set( 0, 0, 0 );
  67. };
  68. var diff = new THREE.Vector3();
  69. function satisfyConstraints( p1, p2, distance ) {
  70. diff.subVectors( p2.position, p1.position );
  71. var currentDist = diff.length();
  72. if ( currentDist === 0 ) return; // prevents division by 0
  73. var correction = diff.multiplyScalar( 1 - distance / currentDist );
  74. var correctionHalf = correction.multiplyScalar( 0.5 );
  75. p1.position.add( correctionHalf );
  76. p2.position.sub( correctionHalf );
  77. }
  78. function Cloth( w, h ) {
  79. w = w || 10;
  80. h = h || 10;
  81. this.w = w;
  82. this.h = h;
  83. var particles = [];
  84. var constraints = [];
  85. var u, v;
  86. // Create particles
  87. for ( v = 0; v <= h; v ++ ) {
  88. for ( u = 0; u <= w; u ++ ) {
  89. particles.push(
  90. new Particle( u / w, v / h, 0, MASS )
  91. );
  92. }
  93. }
  94. // Structural
  95. for ( v = 0; v < h; v ++ ) {
  96. for ( u = 0; u < w; u ++ ) {
  97. constraints.push( [
  98. particles[ index( u, v ) ],
  99. particles[ index( u, v + 1 ) ],
  100. restDistance
  101. ] );
  102. constraints.push( [
  103. particles[ index( u, v ) ],
  104. particles[ index( u + 1, v ) ],
  105. restDistance
  106. ] );
  107. }
  108. }
  109. for ( u = w, v = 0; v < h; v ++ ) {
  110. constraints.push( [
  111. particles[ index( u, v ) ],
  112. particles[ index( u, v + 1 ) ],
  113. restDistance
  114. ] );
  115. }
  116. for ( v = h, u = 0; u < w; u ++ ) {
  117. constraints.push( [
  118. particles[ index( u, v ) ],
  119. particles[ index( u + 1, v ) ],
  120. restDistance
  121. ] );
  122. }
  123. // While many systems use shear and bend springs,
  124. // the relaxed constraints model seems to be just fine
  125. // using structural springs.
  126. // Shear
  127. // var diagonalDist = Math.sqrt(restDistance * restDistance * 2);
  128. // for (v=0;v<h;v++) {
  129. // for (u=0;u<w;u++) {
  130. // constraints.push([
  131. // particles[index(u, v)],
  132. // particles[index(u+1, v+1)],
  133. // diagonalDist
  134. // ]);
  135. // constraints.push([
  136. // particles[index(u+1, v)],
  137. // particles[index(u, v+1)],
  138. // diagonalDist
  139. // ]);
  140. // }
  141. // }
  142. this.particles = particles;
  143. this.constraints = constraints;
  144. function index( u, v ) {
  145. return u + v * ( w + 1 );
  146. }
  147. this.index = index;
  148. }
  149. function simulate( time ) {
  150. if ( ! lastTime ) {
  151. lastTime = time;
  152. return;
  153. }
  154. var i, il, particles, particle, pt, constraints, constraint;
  155. // Aerodynamics forces
  156. if ( wind ) {
  157. var indx;
  158. var normal = new THREE.Vector3();
  159. var indices = clothGeometry.index;
  160. var normals = clothGeometry.attributes.normal;
  161. particles = cloth.particles;
  162. for ( i = 0, il = indices.count; i < il; i += 3 ) {
  163. for ( j = 0; j < 3; j ++ ) {
  164. indx = indices.getX( i + j );
  165. normal.fromBufferAttribute( normals, indx )
  166. tmpForce.copy( normal ).normalize().multiplyScalar( normal.dot( windForce ) );
  167. particles[ indx ].addForce( tmpForce );
  168. }
  169. }
  170. }
  171. for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
  172. particle = particles[ i ];
  173. particle.addForce( gravity );
  174. particle.integrate( TIMESTEP_SQ );
  175. }
  176. // Start Constraints
  177. constraints = cloth.constraints;
  178. il = constraints.length;
  179. for ( i = 0; i < il; i ++ ) {
  180. constraint = constraints[ i ];
  181. satisfyConstraints( constraint[ 0 ], constraint[ 1 ], constraint[ 2 ] );
  182. }
  183. // Ball Constraints
  184. ballPosition.z = - Math.sin( Date.now() / 600 ) * 90; //+ 40;
  185. ballPosition.x = Math.cos( Date.now() / 400 ) * 70;
  186. if ( sphere.visible ) {
  187. for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
  188. particle = particles[ i ];
  189. var pos = particle.position;
  190. diff.subVectors( pos, ballPosition );
  191. if ( diff.length() < ballSize ) {
  192. // collided
  193. diff.normalize().multiplyScalar( ballSize );
  194. pos.copy( ballPosition ).add( diff );
  195. }
  196. }
  197. }
  198. // Floor Constraints
  199. for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
  200. particle = particles[ i ];
  201. pos = particle.position;
  202. if ( pos.y < - 250 ) {
  203. pos.y = - 250;
  204. }
  205. }
  206. // Pin Constraints
  207. for ( i = 0, il = pins.length; i < il; i ++ ) {
  208. var xy = pins[ i ];
  209. var p = particles[ xy ];
  210. p.position.copy( p.original );
  211. p.previous.copy( p.original );
  212. }
  213. }