fix exploding behaviour

4 files changed, 89 insertions, 56 deletions

diff --git a/Scripts/cloth.js b/Scripts/cloth.js
index 5a7a0f2..c77fb1c 100644
--- a/Scripts/cloth.js
+++ b/Scripts/cloth.js
@@ -3,8 +3,11 @@ const DRAG = 1 - DAMPING;
 const MASS = 0.1;

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

 const K = 1;

+const MAX_STRETCH = 1.5;

 

-// Flag Texture

+// Explosion am Anfang

+// Intersect mit Velocity?

+// Wind/Ziehen

 

 const options = {

   wind: true,

@@ -25,7 +28,10 @@ class Constraint {
     //const correction = diff.multiplyScalar(1 - (this.restDist / currentDist));

     const correction = diff.multiplyScalar((currentDist - this.restDist) / currentDist);

     correction.multiplyScalar(K);

-    correction.clampLength(0, 1);

+    if (currentDist >= this.restDist * MAX_STRETCH) {

+

+    }

+    //correction.clampLength(0, 1);

     const correctionHalf = correction.multiplyScalar(0.5);

 

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

@@ -223,7 +229,7 @@ class Cloth {
       constraint.satisfy();

     }

 

-    this.intersect();

+    //this.intersect();

   }

 

   intersect() {

@@ -239,20 +245,42 @@ class Cloth {
           continue;

 

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

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

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

+        // collisionDistance /= 2;

         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);

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

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

+          let diffP1P2 = diffP2P1.clone().multiplyScalar(-1);

+

+          // let v1 = p1.position.clone().sub(p1.previous).normalize();

+          // let v2 = p2.position.clone().sub(p2.previous).normalize();

+

+          // let factor1 = (Math.PI - Math.acos(v1.dot(diffP2P1))) / Math.PI * 2;

+          // let factor2 = (Math.PI - Math.acos(v2.dot(diffP1P2))) / Math.PI * 2;

+

           if (p1.movable)

-            p1.position.add(diff);

+            p1.position.add(diffP2P1);

+            //p1.position.add(diffP2P1.multiplyScalar(factor1));

           if (p2.movable)

-            p2.position.sub(diff);

+            p2.position.add(diffP1P2);

+            //p2.position.add(diffP1P2.multiplyScalar(factor2));

         }

       }

     }

   }

+  blow(camPos, intersects) {

+    let face = intersects[0].face;

+    let dir = intersects[0].point.clone().sub(camPos).multiplyScalar(100);

+    this.particles[face.a].addForce(dir);

+    this.particles[face.b].addForce(dir);

+    this.particles[face.c].addForce(dir);

+  }

+  drag(mousePosWorld, index) {

+    let dir = mousePosWorld.clone().sub(this.particles[index].position).multiplyScalar(200);

+    this.particles[index].addForce(dir);

+  }

 

   /**

    * helper function to calculate index of vertex

diff --git a/Scripts/main.js b/Scripts/main.js
index 5e68a4f..51d6762 100644
--- a/Scripts/main.js
+++ b/Scripts/main.js
@@ -1,19 +1,19 @@
 

 

 function addLights(scene){

-  scene.add( new THREE.AmbientLight( 0x222222 ) );

+  scene.add(new THREE.AmbientLight(0x222222));

 

-  const light1 = new THREE.PointLight( 0xffffff, 1, 50 );

-  light1.position.set( 15, 1, 40 );

-  scene.add( light1 );

+  const light1 = new THREE.PointLight(0xffffff, 1, 50);

+  light1.position.set(15, 1, 40);

+  scene.add(light1);

 

-  const light2 = new THREE.PointLight( 0xffffff, 1, 50 );

-  light2.position.set( -15, 0, 40 );

-  scene.add( light2 );

+  const light2 = new THREE.PointLight(0xffffff, 1, 50);

+  light2.position.set(-15, 0, 40);

+  scene.add(light2);

 

-  const light3 = new THREE.PointLight( 0xffffff, 1, 50 );

-  light3.position.set( 0, -1, 40 );

-  scene.add( light3 );

+  const light3 = new THREE.PointLight(0xffffff, 1, 50);

+  light3.position.set(0, -1, 40);

+  scene.add(light3);

 }

 

 /**

@@ -45,11 +45,11 @@ function setup_scene(canvasSpace) {
     });

 

   /** add flag pole */

-  const geometry = new THREE.CylinderGeometry( 0.02, 0.02, 5, 32 );

-  const material = new THREE.MeshStandardMaterial( {color: 0xffffff} );

-  const cylinder = new THREE.Mesh( geometry, material );

+  const geometry = new THREE.CylinderGeometry(0.02, 0.02, 5, 32);

+  const material = new THREE.MeshStandardMaterial({color: 0xffffff});

+  const cylinder = new THREE.Mesh(geometry, material);

   cylinder.position.set(-0.5, -2.25, 0);

-  scene.add( cylinder );

+  scene.add(cylinder);

 

   /** add global light */

   const directionalLight = new THREE.DirectionalLight(0xffffff, 1);

@@ -84,7 +84,7 @@ function init() {
 

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

   const clothGeometry = cloth.generateGeometry();

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

+  const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/hsrm2.png'), color: {type: "c", value: new THREE.Color(0xffffff)}, side: THREE.DoubleSide, flatShading: false, transparent: true });

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

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

   scene.add(clothMesh);

@@ -96,7 +96,9 @@ function init() {
 

   let raycaster = new THREE.Raycaster();

   let intersects;

-  let rightMousePressed;

+  let windKeyDown = false;

+  let dragKeyDown = false;

+  let draggedIndex = -1;

   /**

    * function called every frame

    * @param {number} dt - time passed since last frame in ms

@@ -106,13 +108,18 @@ function init() {
 

     cloth.updateGeometry(clothGeometry);

     

-    raycaster.setFromCamera( new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera );

-

-    // intersects = raycaster.intersectObject( mesh );

-

-    // if ( intersects.length > 0 && rightMousePressed) {

-    //   // Cloth mouse interaction

-    // }

+    raycaster.setFromCamera(new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera);

+

+    intersects = raycaster.intersectObject(clothMesh);

+

+    if (intersects.length > 0) {

+      if (windKeyDown)

+        cloth.blow(camera.position, intersects);

+      if (dragKeyDown && draggedIndex == -1)

+        draggedIndex = intersects[0].face.a;

+    }

+    if (dragKeyDown && draggedIndex != -1)

+      cloth.drag(calculateMousePosToWorld(mousePos), draggedIndex);

     setTimeout(() => {

       animate(frameTime);

     }, frameTime);

@@ -138,7 +145,7 @@ function init() {
    * start rendering

    */

   if (canvas.getContext) {

-    animate(performance.now());

+    animate(frameTime);

   }

 

   

@@ -147,8 +154,6 @@ function init() {
   canvas.onmousemove = (evt) => {

     mousePos.x = evt.clientX;

     mousePos.y = evt.clientY;

-

-    //cloth.mouseMove(calculateMousePosToWorld(evt));

   };

 

   /**

@@ -158,38 +163,38 @@ function init() {
     evt.preventDefault();

   }, false);

 

+  document.onkeydown = (evt) => {

+    if (evt.code === "KeyW")

+      windKeyDown = true;

+    if (evt.code === "KeyD")

+      dragKeyDown = true;

+  };

 

-  canvas.onmousedown = (evt) => {

-

-    // Check mouse click

-    rightMousePressed = evt.button == 2;

-    

-    if(intersects.length > 0 && evt.button == 0){

-      //cloth.mousePress(intersects);

-    } 

-  }

-  

-  canvas.onmouseup = (evt) => {

-    //cloth.mouseRelease();

-    rightMousePressed = false;

-  }

+  document.onkeyup = (evt) => {

+    if (evt.code === "KeyW")

+      windKeyDown = false;

+    if (evt.code === "KeyD") {

+      dragKeyDown = false;

+      draggedIndex = -1;

+    }

+  };

 

-  function calculateMousePosToWorld(evt){

+  function calculateMousePosToWorld(mousePos){

     var vec = new THREE.Vector3(); // create once and reuse

     var pos = new THREE.Vector3(); // create once and reuse

 

     vec.set(

-      ( evt.clientX / window.innerWidth ) * 2 - 1,

-    - ( evt.clientY / window.innerHeight ) * 2 + 1,

-      0.5 );

+      (mousePos.x / window.innerWidth) * 2 - 1,

+    - (mousePos.y / window.innerHeight) * 2 + 1,

+      0.5);

 

-    vec.unproject( camera );

+    vec.unproject(camera);

 

-    vec.sub( camera.position ).normalize();

+    vec.sub(camera.position).normalize();

 

     var distance = - camera.position.z / vec.z;

 

-    pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );

+    pos.copy(camera.position).add(vec.multiplyScalar(distance));

     return pos;

   }

 }
\ No newline at end of file
diff --git a/Textures/hsrm2.png b/Textures/hsrm2.png
new file mode 100644
index 0000000..6b83d6b
--- /dev/null
+++ b/Textures/hsrm2.png
diff --git a/index.html b/index.html
index 14f79e4..de3e51b 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
 

 	<div id="threejscontainer"></div>

 	<div id="Output"></div>

-	<input type="checkbox" id="windToggle" checked="true">Wind</input>

+	<input type="checkbox" id="windToggle">Wind</input>

 </body>

 

 </html>
\ No newline at end of file