X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/c2adddfd9ecca5d483cf3147b8bd4870f3ea6150..922aa01da3aa479023c94bb5c016d437f94b6f93:/Scripts/main.js diff --git a/Scripts/main.js b/Scripts/main.js index f395b6c..1f26606 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -26,24 +26,159 @@ function init() { } } + 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, 0.1, 1000); + 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 - 200); + renderer.setSize(window.innerWidth, window.innerHeight - canvasSpace); document.getElementById("threejscontainer").appendChild(renderer.domElement); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); scene.add(directionalLight); - const geometry = new THREE.BoxGeometry(); + let cloth = Cloth.CreateBasic(10, 10, 5, 5); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); - const cube = new THREE.Mesh(geometry, material); - scene.add(cube); + const mesh = new THREE.Mesh(cloth.geometry, material); + scene.add(mesh); - camera.position.z = 5; + camera.position.y = 5; + camera.position.z = 10; function animate(dt) { requestAnimationFrame(animate);