X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/922aa01da3aa479023c94bb5c016d437f94b6f93..b9cfb0c7bf25e9ebc0c21e0b32665113ea46f7b5:/Scripts/main.js diff --git a/Scripts/main.js b/Scripts/main.js index 1f26606..e69de29 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,205 +0,0 @@ -function init() { - class Point { - constructor(x, y) { - this.x = x; - this.y = y; - } - - add(that) { - return new Point( - this.x + that.x, - this.y + that.y - ); - } - - sub(that) { - return new Point( - this.x - that.x, - this.y - that.y - ); - } - - dist(that) { - let a = this.x - that.x; - let b = this.y - that.y; - return Math.sqrt(a * a + b * b) - } - } - - function vectorLength(a, b) { - let v1 = new THREE.Vector3(); - v1.set(a.x, a.y, a.z); - let v2 = new THREE.Vector3(); - v2.set(b.x, b.y, b.z); - - return v1.sub(v2).length(); - } - - class Face { - a; - b; - c; - d; - - springs = []; - - constructor(a, b, c, d) { - this.a = a; - this.b = b; - this.c = c; - this.d = d; - } - } - - class Spring { - restLength; - currentLength; - index1; - index2; - - constructor(vertices, index1, index2) { - this.index1 = index1; - this.index2 = index2; - - let length = vectorLength(vertices[index1], vertices[index2]); - this.restLength = length; - this.currentLength = length; - } - } - - class Cloth { - VertexWeight = 1; - - geometry = new THREE.Geometry(); - - faces = []; - - vertexWeights = []; - - static CreateBasic(width, height, numPointsWidth, numPointsHeight) { - let vertices = []; - let faces = []; - - let stepWidth = width / (numPointsWidth - 1); - let stepHeight = height / (numPointsHeight - 1); - - for (let y = 0; y < numPointsHeight; y++) { - for (let x = 0; x < numPointsWidth; x++) { - vertices.push( - new THREE.Vector3(x * stepWidth, height - y * stepHeight, 0) - ); - } - } - - function getVertexIndex(x, y) { - return y * numPointsWidth + x; - } - - for (let y = 0; y < numPointsHeight - 1; y++) { - for (let x = 0; x < numPointsWidth - 1; x++) { - let newFace = new Face( - getVertexIndex(x, y), - getVertexIndex(x, y + 1), - getVertexIndex(x + 1, y), - getVertexIndex(x + 1, y + 1), - ); - - newFace.springs.push(new Spring(vertices, getVertexIndex(x, y), getVertexIndex(x + 1, y))); - newFace.springs.push(new Spring(vertices, getVertexIndex(x, y), getVertexIndex(x, y + 1))); - newFace.springs.push(new Spring(vertices, getVertexIndex(x, y), getVertexIndex(x + 1, y + 1))); - newFace.springs.push(new Spring(vertices, getVertexIndex(x + 1, y), getVertexIndex(x, y + 1))); - newFace.springs.push(new Spring(vertices, getVertexIndex(x + 1, y), getVertexIndex(x + 1, y + 1))); - newFace.springs.push(new Spring(vertices, getVertexIndex(x, y + 1), getVertexIndex(x + 1, y + 1))); - - faces.push(newFace); - } - } - - return this.CreateExplicit(vertices, faces); - } - - static CreateExplicit(vertices, faces) { - let result = new Cloth(); - - for (let i in vertices) { - result.geometry.vertices.push(vertices[i]); - result.vertexWeights.push(0); - } - console.log(vertices); - for (let i in faces) { - let face = faces[i]; - - result.geometry.faces.push(new THREE.Face3( - face.a, face.b, face.c - )); - result.geometry.faces.push(new THREE.Face3( - face.c, face.b, face.d - )); - - console.log(face); - - let xLength = vectorLength(result.geometry.vertices[face.b], result.geometry.vertices[face.a]); - let yLength = vectorLength(result.geometry.vertices[face.c], result.geometry.vertices[face.a]); - let weight = xLength * yLength / 2; - - xLength = vectorLength(result.geometry.vertices[face.b], result.geometry.vertices[face.d]); - yLength = vectorLength(result.geometry.vertices[face.c], result.geometry.vertices[face.d]); - weight += xLength * yLength / 2; - - result.vertexWeights[face.a] += weight / 4; - result.vertexWeights[face.b] += weight / 4; - result.vertexWeights[face.c] += weight / 4; - result.vertexWeights[face.d] += weight / 4; - } - - result.geometry.computeBoundingSphere(); - - return result; - } - } - - let mousePos = new Point(); - - const canvasSpace = 200; - - const scene = new THREE.Scene(); - const camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight - canvasSpace), 0.1, 1000); - - const renderer = new THREE.WebGLRenderer(); - renderer.setSize(window.innerWidth, window.innerHeight - canvasSpace); - document.getElementById("threejscontainer").appendChild(renderer.domElement); - - const directionalLight = new THREE.DirectionalLight(0xffffff, 1); - scene.add(directionalLight); - - let cloth = Cloth.CreateBasic(10, 10, 5, 5); - const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); - const mesh = new THREE.Mesh(cloth.geometry, material); - scene.add(mesh); - - camera.position.y = 5; - camera.position.z = 10; - - function animate(dt) { - requestAnimationFrame(animate); - renderer.render(scene, camera); - } - - let canvas = document.getElementsByTagName("canvas")[0]; - let resize = function () { - w = window.innerWidth; - h = window.innerHeight - 200; - canvas.width = w; - canvas.height = h; - } - window.onresize = resize; - resize(); - if (canvas.getContext) { - ctx = canvas.getContext('2d'); - animate(performance.now()); - } - canvas.onmousemove = (evt) => { - mousePos.x = evt.clientX; - mousePos.y = evt.clientY; - }; -} \ No newline at end of file