Cloth.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  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 ) {
  32. var x = ( u - 0.5 ) * width;
  33. var y = ( v + 0.5 ) * height;
  34. var z = 0;
  35. return new THREE.Vector3( x, y, z );
  36. };
  37. }
  38. function Particle( x, y, z, mass ) {
  39. this.position = clothFunction( x, y ); // position
  40. this.previous = clothFunction( x, y ); // previous
  41. this.original = clothFunction( x, y );
  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. }
  48. // Force -> Acceleration
  49. Particle.prototype.addForce = function( force ) {
  50. this.a.add(
  51. this.tmp2.copy( force ).multiplyScalar( this.invMass )
  52. );
  53. };
  54. // Performs Verlet integration
  55. Particle.prototype.integrate = function( timesq ) {
  56. var newPos = this.tmp.subVectors( this.position, this.previous );
  57. newPos.multiplyScalar( DRAG ).add( this.position );
  58. newPos.add( this.a.multiplyScalar( timesq ) );
  59. this.tmp = this.previous;
  60. this.previous = this.position;
  61. this.position = newPos;
  62. this.a.set( 0, 0, 0 );
  63. };
  64. var diff = new THREE.Vector3();
  65. function satisifyConstraints( p1, p2, distance ) {
  66. diff.subVectors( p2.position, p1.position );
  67. var currentDist = diff.length();
  68. if ( currentDist === 0 ) return; // prevents division by 0
  69. var correction = diff.multiplyScalar( 1 - distance / currentDist );
  70. var correctionHalf = correction.multiplyScalar( 0.5 );
  71. p1.position.add( correctionHalf );
  72. p2.position.sub( correctionHalf );
  73. }
  74. function Cloth( w, h ) {
  75. w = w || 10;
  76. h = h || 10;
  77. this.w = w;
  78. this.h = h;
  79. var particles = [];
  80. var constraints = [];
  81. var u, v;
  82. // Create particles
  83. for ( v = 0; v <= h; v ++ ) {
  84. for ( u = 0; u <= w; u ++ ) {
  85. particles.push(
  86. new Particle( u / w, v / h, 0, MASS )
  87. );
  88. }
  89. }
  90. // Structural
  91. for ( v = 0; v < h; v ++ ) {
  92. for ( u = 0; u < w; u ++ ) {
  93. constraints.push( [
  94. particles[ index( u, v ) ],
  95. particles[ index( u, v + 1 ) ],
  96. restDistance
  97. ] );
  98. constraints.push( [
  99. particles[ index( u, v ) ],
  100. particles[ index( u + 1, v ) ],
  101. restDistance
  102. ] );
  103. }
  104. }
  105. for ( u = w, v = 0; v < h; v ++ ) {
  106. constraints.push( [
  107. particles[ index( u, v ) ],
  108. particles[ index( u, v + 1 ) ],
  109. restDistance
  110. ] );
  111. }
  112. for ( v = h, u = 0; u < w; u ++ ) {
  113. constraints.push( [
  114. particles[ index( u, v ) ],
  115. particles[ index( u + 1, v ) ],
  116. restDistance
  117. ] );
  118. }
  119. // While many systems use shear and bend springs,
  120. // the relaxed constraints model seems to be just fine
  121. // using structural springs.
  122. // Shear
  123. // var diagonalDist = Math.sqrt(restDistance * restDistance * 2);
  124. // for (v=0;v<h;v++) {
  125. // for (u=0;u<w;u++) {
  126. // constraints.push([
  127. // particles[index(u, v)],
  128. // particles[index(u+1, v+1)],
  129. // diagonalDist
  130. // ]);
  131. // constraints.push([
  132. // particles[index(u+1, v)],
  133. // particles[index(u, v+1)],
  134. // diagonalDist
  135. // ]);
  136. // }
  137. // }
  138. this.particles = particles;
  139. this.constraints = constraints;
  140. function index( u, v ) {
  141. return u + v * ( w + 1 );
  142. }
  143. this.index = index;
  144. }
  145. function simulate( time ) {
  146. if ( ! lastTime ) {
  147. lastTime = time;
  148. return;
  149. }
  150. var i, il, particles, particle, pt, constraints, constraint;
  151. // Aerodynamics forces
  152. if ( wind ) {
  153. var face, faces = clothGeometry.faces, normal;
  154. particles = cloth.particles;
  155. for ( i = 0, il = faces.length; i < il; i ++ ) {
  156. face = faces[ i ];
  157. normal = face.normal;
  158. tmpForce.copy( normal ).normalize().multiplyScalar( normal.dot( windForce ) );
  159. particles[ face.a ].addForce( tmpForce );
  160. particles[ face.b ].addForce( tmpForce );
  161. particles[ face.c ].addForce( tmpForce );
  162. }
  163. }
  164. for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
  165. particle = particles[ i ];
  166. particle.addForce( gravity );
  167. particle.integrate( TIMESTEP_SQ );
  168. }
  169. // Start Constraints
  170. constraints = cloth.constraints;
  171. il = constraints.length;
  172. for ( i = 0; i < il; i ++ ) {
  173. constraint = constraints[ i ];
  174. satisifyConstraints( constraint[ 0 ], constraint[ 1 ], constraint[ 2 ] );
  175. }
  176. // Ball Constraints
  177. ballPosition.z = - Math.sin( Date.now() / 600 ) * 90 ; //+ 40;
  178. ballPosition.x = Math.cos( Date.now() / 400 ) * 70;
  179. if ( sphere.visible ) {
  180. for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
  181. particle = particles[ i ];
  182. pos = particle.position;
  183. diff.subVectors( pos, ballPosition );
  184. if ( diff.length() < ballSize ) {
  185. // collided
  186. diff.normalize().multiplyScalar( ballSize );
  187. pos.copy( ballPosition ).add( diff );
  188. }
  189. }
  190. }
  191. // Floor Constraints
  192. for ( particles = cloth.particles, i = 0, il = particles.length; i < il; i ++ ) {
  193. particle = particles[ i ];
  194. pos = particle.position;
  195. if ( pos.y < - 250 ) {
  196. pos.y = - 250;
  197. }
  198. }
  199. // Pin Constraints
  200. for ( i = 0, il = pins.length; i < il; i ++ ) {
  201. var xy = pins[ i ];
  202. var p = particles[ xy ];
  203. p.position.copy( p.original );
  204. p.previous.copy( p.original );
  205. }
  206. }