add cloth-cloth collision

2 files changed, 53 insertions, 10 deletions

diff --git a/Scripts/cloth.js b/Scripts/cloth.js
index aaa9d24..ff55549 100644
--- a/Scripts/cloth.js
+++ b/Scripts/cloth.js
@@ -1,6 +1,6 @@
 const DAMPING = 0.03;

 const DRAG = 1 - DAMPING;

-const MASS = 0.35;

+const MASS = 0.1;

 const GRAVITY = new THREE.Vector3(0, -9.81 * MASS, 0);

 const K = 1;

 

@@ -25,18 +25,23 @@ class Constraint {
     correction.multiplyScalar(K);

     correction.clampLength(0, 1);

     const correctionHalf = correction.multiplyScalar(0.5);

-    if (this.p1.movable && this.p2.movable) {

+

+    let p1movable = this.p1.movable && this.p1.movableTmp;

+    let p2movable = this.p2.movable && this.p2.movableTmp;

+

+    if (p1movable && p2movable) {

       this.p1.position.add(correctionHalf);

       this.p2.position.sub(correctionHalf);

-    } else if (! this.p1.movable && this.p2.movable) {

+    } else if (! p1movable && p2movable) {

       this.p2.position.sub(correction);

-    } else if (this.p1.movable && ! this.p2.movable) {

+    } else if (p1movable && ! p2movable) {

       this.p1.position.add(correction);

     }

   }

 }

 

 class Particle {

+  movableTmp = true;

   movable = true;

 

   constructor(x, y, z, mass) {

@@ -59,7 +64,7 @@ class Particle {
     nextPosition.add(this.position);

     nextPosition.add(this.acceleration.multiplyScalar(dt*dt));

 

-    if (this.movable) {

+    if (this.movable && this.movableTmp) {

       this.previous = this.position;

       this.position = nextPosition;

     }

@@ -74,7 +79,7 @@ class Cloth {
     this.height = height;

     this.numPointsWidth = numPointsWidth;

     this.numPointsHeight = numPointsHeight;

-    this.windFactor = new THREE.Vector3(5, 2, 2);

+    this.windFactor = new THREE.Vector3(3, 2, 2);

 

     /**

      * distance between two vertices horizontally/vertically

@@ -103,8 +108,8 @@ class Cloth {
 

     //this.particles[this.getVertexIndex(0, 0)].movable = false;

     const n = 3;

-    for (let i = 0; i <= n; i++)

-      this.particles[this.getVertexIndex(0, Math.floor((numPointsHeight-1)*(i/n)))].movable = false;

+    for (let i = 0; i < numPointsHeight; i++)

+      this.particles[this.getVertexIndex(0, i)].movable = false;

     //this.particles[this.getVertexIndex(0, numPointsHeight-1)].movable = false;

     //this.particles[this.getVertexIndex(numPointsWidth-1, 0)].movable = false;

 

@@ -213,8 +218,42 @@ class Cloth {
     for (let constraint of this.constraints) {

       constraint.satisfy();

     }

-    //console.log(tmpCorrection);

+

+    this.intersect();

+  }

+

+  intersect() {

+    let npw = this.numPointsWidth;

+    function getX(i) { return i % npw; }

+    function getY(i) { return Math.floor(i / npw); }

+

+    for (let i in this.particles) {

+      for (let j in this.particles) {  

+        let p1 = this.particles[i];

+        let p2 = this.particles[j];

+

+        p1.movableTmp = true;

+        p2.movableTmp = true;

+

+        if (i == j || (Math.abs(getX(i) - getX(j)) == 1 && Math.abs(getY(i) - getY(j)) == 1))

+          continue;

+

+        let dist = p1.position.distanceTo(p2.position);

+        const collisionDistance = Math.min(this.width / this.numPointsWidth, this.height / this.numPointsHeight);

+        if (dist < collisionDistance) {

+          p1.movableTmp = false;

+          p2.movableTmp = false;

+          let diff = p1.position.clone().sub(p2.position).normalize();

+          diff.multiplyScalar((collisionDistance - dist) * 1.001 / 2);

+          if (p1.movable)

+            p1.position.add(diff);

+          if (p2.movable)

+            p2.position.sub(diff);

+        }

+      }

+    }

   }

+

   /**

    * helper function to calculate index of vertex

    * in "vertices" array based on its x and y positions

diff --git a/Scripts/main.js b/Scripts/main.js
index 7611601..6fa9f22 100644
--- a/Scripts/main.js
+++ b/Scripts/main.js
@@ -83,13 +83,17 @@ function init() {
   //const loader = new THREE.TextureLoader();

   //Red color: 0xC70039

 

-  const cloth = new Cloth(1, 0.5, 40, 20);

+  const cloth = new Cloth(1, 0.5, 20, 20);

   const clothGeometry = cloth.generateGeometry();

   //const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/DeutschlandFlagge.jpg'), color: 0xffffff, side: THREE.DoubleSide, flatShading: false});

   const clothMaterial = new THREE.MeshStandardMaterial({ color: 0xC70039, side: THREE.DoubleSide, flatShading: false });

   const clothMesh = new THREE.Mesh(clothGeometry, clothMaterial);

   scene.add(clothMesh);

   

+  document.getElementById("windToggle").onchange = (e) => {

+    options.wind = e.target.checked;

+  };

+

   let raycaster = new THREE.Raycaster();

   let intersects;

   let rightMousePressed;