diff options
| -rw-r--r-- | Scripts/cloth.js | 34 | ||||
| -rw-r--r-- | Scripts/main.js | 35 | ||||
| -rw-r--r-- | index.html | 2 |
3 files changed, 54 insertions, 17 deletions
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);
@@ -10,6 +10,7 @@ }
</style>
<script src="./Scripts/three.js"></script>
+ <script type="module" src="./Scripts/OrbitControls.js"></script>
<script type="module" src="./Scripts/main.js"></script>
</script>
</head>
@@ -17,6 +18,7 @@ <body>
<div id="threejscontainer"></div>
<div id="Output"></div>
+ <input type="checkbox" id="windToggle" checked="true">Wind</input>
</body>
</html>
\ No newline at end of file |