From: Patrick Schönberger Date: Mon, 1 Feb 2021 14:33:36 +0000 (+0100) Subject: orbit/background, flag, wind control X-Git-Url: https://gitweb.ps.run/cloth_sim/commitdiff_plain/f48718f397ffbc1eb006460c495cf260668bd545?ds=inline orbit/background, flag, wind control --- diff --git a/Scripts/cloth.js b/Scripts/cloth.js index 0708d5e..546f7d3 100644 --- a/Scripts/cloth.js +++ b/Scripts/cloth.js @@ -103,6 +103,8 @@ export class Cloth { externalForces = []; windForce = 50; + windFactor = new THREE.Vector3(0, 0, 0); + /** * creates a rectangular piece of cloth * takes the size of the cloth @@ -117,6 +119,8 @@ export class Cloth { let vertices = []; let faces = []; + this.width = width; + this.height = height; this.numPointsWidth = numPointsWidth; this.numPointsHeight = numPointsHeight; @@ -135,7 +139,7 @@ export class Cloth { for (let y = 0; y < numPointsHeight; y++) { for (let x = 0; x < numPointsWidth; x++) { vertices.push( - new THREE.Vector3((x - (numPointsWidth/2)) * stepWidth, height - y * stepHeight, 0) + new THREE.Vector3((x - ((numPointsWidth-1)/2)) * stepWidth, height - (y + ((numPointsHeight-1)/2)) * stepHeight, 0) ); } } @@ -184,10 +188,8 @@ export class Cloth { /** * hand cloth from left and right upper corners */ - //this.vertexRigidness[0] = true; - //this.vertexRigidness[numPointsWidth * (numPointsHeight - 1)] = true; - this.fixedPoints.push(getVertexIndex(8, 10)); - this.fixedPoints.push(getVertexIndex(12, 9)); + this.fixedPoints.push(getVertexIndex(0, 0)); + this.fixedPoints.push(getVertexIndex(0, 19)); } /** @@ -244,6 +246,8 @@ export class Cloth { yLength = vectorLength(this.geometry.vertices[face.c], this.geometry.vertices[face.d]); weight += xLength * yLength / 2; + weight *= 10; + /** * split weight equally between four surrounding vertices */ @@ -382,14 +386,15 @@ checkIntersect() { let posI = this.geometry.vertices[i]; let posJ = this.geometry.vertices[j]; let dist = posI.distanceTo(posJ); - const collisionDistance = 0.5; + const collisionDistance = Math.min(this.width / this.numPointsWidth, this.height / this.numPointsHeight); if (dist < collisionDistance) { this.vertexRigidness[i] = true; this.vertexRigidness[j] = true; let diff = this.geometry.vertices[i].clone().sub(this.geometry.vertices[j]).normalize().multiplyScalar((collisionDistance - dist) * 1.001 / 2); - this.geometry.vertices[i].add(diff); - this.geometry.vertices[j].sub(diff); - console.log(this.geometry.vertices[i].distanceTo(this.geometry.vertices[j])); + if (!(this.fixedPoints.includes(i) || this.fixedPoints.includes(j))) { + this.geometry.vertices[i].add(diff); + this.geometry.vertices[j].sub(diff); + } } } } @@ -414,14 +419,15 @@ getAcceleration(vertexIndex, dt) { // constant gravity let g = new THREE.Vector3(0, -9.8, 0); // stiffness - let k = 500; + let k = 1000; // Wind vector let fWind = new THREE.Vector3( - Math.sin(vertex.x * vertex.y * this.time), - Math.cos(vertex.z * this.time), - Math.sin(Math.cos(5 * vertex.x * vertex.y * vertex.z)) + this.windFactor.x * (Math.sin(vertex.x * vertex.y * this.time)+1), + this.windFactor.y * Math.cos(vertex.z * this.time), + this.windFactor.z * Math.sin(Math.cos(5 * vertex.x * vertex.y * vertex.z)) ); + //console.log(fWind); /** * constant determined by the properties of the surrounding fluids (air) @@ -551,7 +557,7 @@ verlet(currentPosition, previousPosition, acceleration, passedTime) { // next position = 2 * current Position - previous position + acceleration * (passed time)^2 // acceleration (dv/dt) = F(net) // Dependency for one vertex: gravity, fluids/air, springs - const DRAG = 0.96; + const DRAG = 0.97; let nextPosition = new THREE.Vector3( (currentPosition.x - previousPosition.x) * DRAG + currentPosition.x + acceleration.x * (passedTime * passedTime), (currentPosition.y - previousPosition.y) * DRAG + currentPosition.y + acceleration.y * (passedTime * passedTime), diff --git a/Scripts/main.js b/Scripts/main.js index 588e8f1..fc797c8 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,4 +1,5 @@ import { Face, Spring, Cloth } from './cloth.js'; +import { OrbitControls } from './OrbitControls.js'; function addLights(scene){ @@ -27,16 +28,38 @@ function setup_scene(canvasSpace) { const renderer = new THREE.WebGLRenderer(); /** size canvas to leave some space for UI */ renderer.setSize(window.innerWidth, window.innerHeight - canvasSpace); + renderer.antialias = true; /** embed canvas in HTML */ document.getElementById("threejscontainer").appendChild(renderer.domElement); + /** add orbit controls */ + const controls = new OrbitControls(camera, renderer.domElement); + controls.target.set(0, 0, 0); + controls.update(); + + /** add scene background */ + const loader = new THREE.TextureLoader(); + const texture = loader.load( + 'Textures/tears_of_steel_bridge_2k.jpg', + () => { + const rt = new THREE.WebGLCubeRenderTarget(texture.image.height); + rt.fromEquirectangularTexture(renderer, texture); + scene.background = rt; + }); + + /** 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 ); + cylinder.position.set(-0.5, -2.25, 0); + scene.add( cylinder ); + /** add global light */ const directionalLight = new THREE.DirectionalLight(0xffffff, 1); scene.add(directionalLight); /** position camera */ - camera.position.y = 3; - camera.position.z = 10; + camera.position.z = 2; addLights(scene); return [scene, camera, renderer]; } @@ -62,7 +85,13 @@ function init() { /** setup cloth and generate debug mesh */ let cloth = new Cloth(); - cloth.createBasic(10, 10, 20, 20); + cloth.createBasic(1, 0.5, 20, 20); + document.getElementById("windToggle").onchange = (e) => { + if (e.target.checked) + cloth.windFactor.set(0.5, 0.2, 0.2); + else + cloth.windFactor.set(0, 0, 0); + }; //cloth.createDebugMesh(scene); diff --git a/index.html b/index.html index 8f0eeb1..7abe428 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@ } + @@ -17,6 +18,7 @@
+ Wind \ No newline at end of file