diff options
| -rw-r--r-- | Scripts/cloth.js | 51 | ||||
| -rw-r--r-- | Scripts/main.js | 4 |
2 files changed, 33 insertions, 22 deletions
diff --git a/Scripts/cloth.js b/Scripts/cloth.js index 0c4f02c..aaa9d24 100644 --- a/Scripts/cloth.js +++ b/Scripts/cloth.js @@ -1,10 +1,12 @@ const DAMPING = 0.03;
const DRAG = 1 - DAMPING;
-const MASS = 0.1;
+const MASS = 0.35;
const GRAVITY = new THREE.Vector3(0, -9.81 * MASS, 0);
const K = 1;
-let tmpCorrection;
+const options = {
+ wind: true,
+};
class Constraint {
constructor(p1, p2, restDist) {
@@ -18,12 +20,19 @@ class Constraint { const currentDist = diff.length();
if (currentDist == 0) return;
if (currentDist <= this.restDist) return;
- const correction = diff.multiplyScalar(1 - (this.restDist / currentDist));
+ //const correction = diff.multiplyScalar(1 - (this.restDist / currentDist));
+ const correction = diff.multiplyScalar((currentDist - this.restDist) / currentDist);
correction.multiplyScalar(K);
- tmpCorrection = correction;
+ correction.clampLength(0, 1);
const correctionHalf = correction.multiplyScalar(0.5);
- this.p1.position.add(correctionHalf);
- this.p2.position.sub(correctionHalf);
+ if (this.p1.movable && this.p2.movable) {
+ this.p1.position.add(correctionHalf);
+ this.p2.position.sub(correctionHalf);
+ } else if (! this.p1.movable && this.p2.movable) {
+ this.p2.position.sub(correction);
+ } else if (this.p1.movable && ! this.p2.movable) {
+ this.p1.position.add(correction);
+ }
}
}
@@ -50,8 +59,10 @@ class Particle { nextPosition.add(this.position);
nextPosition.add(this.acceleration.multiplyScalar(dt*dt));
- this.previous = this.position;
- this.position = nextPosition;
+ if (this.movable) {
+ this.previous = this.position;
+ this.position = nextPosition;
+ }
this.acceleration.set(0, 0, 0);
}
@@ -63,7 +74,7 @@ class Cloth { this.height = height;
this.numPointsWidth = numPointsWidth;
this.numPointsHeight = numPointsHeight;
- this.windFactor = new THREE.Vector3(0.5, 0.2, 0.2);
+ this.windFactor = new THREE.Vector3(5, 2, 2);
/**
* distance between two vertices horizontally/vertically
@@ -90,9 +101,12 @@ class Cloth { }
}
- this.particles[this.getVertexIndex(0, 0)].movable = false;
- this.particles[this.getVertexIndex(0, numPointsHeight-1)].movable = false;
- this.particles[this.getVertexIndex(numPointsWidth-1, 0)].movable = false;
+ //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;
+ //this.particles[this.getVertexIndex(0, numPointsHeight-1)].movable = false;
+ //this.particles[this.getVertexIndex(numPointsWidth-1, 0)].movable = false;
const REST_DIST_X = width / (numPointsWidth-1);
const REST_DIST_Y = height / (numPointsHeight-1);
@@ -168,13 +182,9 @@ class Cloth { const positions = geometry.attributes.position.array;
for (let i in this.particles) {
let p = this.particles[i];
- if (p.movable) {
- positions[i*3+0] = p.position.x;
- positions[i*3+1] = p.position.y;
- positions[i*3+2] = p.position.z;
- } else {
- p.position = p.previous;
- }
+ positions[i*3+0] = p.position.x;
+ positions[i*3+1] = p.position.y;
+ positions[i*3+2] = p.position.z;
}
geometry.attributes.position.needsUpdate = true;
geometry.computeBoundingSphere();
@@ -190,7 +200,8 @@ class Cloth { this.windFactor.z * Math.sin(Math.cos(5 * vertex.x * vertex.y * vertex.z))
);
// normalize then multiply?
- particle.addForce(fWind);
+ if (options.wind)
+ particle.addForce(fWind);
// calculate wind with normal?
particle.addForce(GRAVITY);
diff --git a/Scripts/main.js b/Scripts/main.js index 3353f4d..7611601 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -75,7 +75,7 @@ function init() { const canvasSpace = 200;
/** Constant Frame Time */
- const frameTime = 1000.0 / 60.0;
+ const frameTime = 1000.0 / 200.0;
/** Setup scene */
let [scene, camera, renderer] = setup_scene(canvasSpace);
@@ -83,7 +83,7 @@ function init() { //const loader = new THREE.TextureLoader();
//Red color: 0xC70039
- const cloth = new Cloth(1, 0.5, 20, 10);
+ const cloth = new Cloth(1, 0.5, 40, 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 });
|