From: Patrick Date: Thu, 18 Mar 2021 12:26:11 +0000 (+0100) Subject: fix exploding behaviour X-Git-Url: https://gitweb.ps.run/cloth_sim/commitdiff_plain/44436c7880a40597c7b74151d342ae8092fba499 fix exploding behaviour --- 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 Binary files /dev/null and b/Textures/hsrm2.png differ diff --git a/index.html b/index.html index 14f79e4..de3e51b 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@
- Wind + Wind \ No newline at end of file