X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/dcdf429d920b067cf18d50ef9f12032a0cf2dcc2..eac8eb4ec5115f16fc17b94fb194fdc1c005ddb5:/Scripts/main.js diff --git a/Scripts/main.js b/Scripts/main.js index fb7a8b2..1a30f7a 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,240 +1,210 @@ -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; - } - } +function addLights(scene){ + scene.add(new THREE.AmbientLight(0x222222)); - class Spring { - restLength; - currentLength; - index1; - index2; + const light1 = new THREE.PointLight(0xffffff, 1, 50); + light1.position.set(15, 1, 40); + scene.add(light1); - constructor(vertices, index1, index2) { - this.index1 = index1; - this.index2 = index2; + const light2 = new THREE.PointLight(0xffffff, 1, 50); + light2.position.set(-15, 0, 40); + scene.add(light2); - let length = vectorLength(vertices[index1], vertices[index2]); - this.restLength = length; - this.currentLength = length; - } - } - - class Cloth { - VertexWeight = 1; - - geometry = new THREE.Geometry(); - - faces = []; - - vertexWeights = []; - - 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); - } - } - - this.createExplicit(vertices, faces); - } - - createExplicit(vertices, faces) { - for (let i in vertices) { - this.geometry.vertices.push(vertices[i]); - this.vertexWeights.push(0); - } - for (let i in faces) { - let face = faces[i]; - - this.faces.push(face); - - this.geometry.faces.push(new THREE.Face3( - face.a, face.b, face.c - )); - this.geometry.faces.push(new THREE.Face3( - face.c, face.b, face.d - )); - - let xLength = vectorLength(this.geometry.vertices[face.b], this.geometry.vertices[face.a]); - let yLength = vectorLength(this.geometry.vertices[face.c], this.geometry.vertices[face.a]); - let weight = xLength * yLength / 2; - - xLength = vectorLength(this.geometry.vertices[face.b], this.geometry.vertices[face.d]); - yLength = vectorLength(this.geometry.vertices[face.c], this.geometry.vertices[face.d]); - weight += xLength * yLength / 2; - - this.vertexWeights[face.a] += weight / 4; - this.vertexWeights[face.b] += weight / 4; - this.vertexWeights[face.c] += weight / 4; - this.vertexWeights[face.d] += weight / 4; - } - - this.geometry.computeBoundingSphere(); - } - - createDebugMesh(scene) { - function addLine(from, to, color) { - let geometry = new THREE.Geometry(); - geometry.vertices.push(from); - geometry.vertices.push(to); - let material = new THREE.LineBasicMaterial( { color: color, linewidth: 10 } ); - let line = new THREE.Line(geometry, material); - line.renderOrder = 1; - scene.add(line); - } - function addPoint(point, color) { - const geometry = new THREE.SphereGeometry( 0.05, 32, 32 ); - const material = new THREE.MeshBasicMaterial( { color: color } ); - const sphere = new THREE.Mesh( geometry, material ); - sphere.position.set(point.x, point.y, point.z); - scene.add( sphere ); - } - - let lineColor = 0x000000; - let pointColor = 0xff00000; - - for (let i in this.faces) { - let face = this.faces[i]; - addLine(this.geometry.vertices[face.a], this.geometry.vertices[face.b], lineColor); - addLine(this.geometry.vertices[face.a], this.geometry.vertices[face.c], lineColor); - addLine(this.geometry.vertices[face.a], this.geometry.vertices[face.d], lineColor); - addLine(this.geometry.vertices[face.b], this.geometry.vertices[face.c], lineColor); - addLine(this.geometry.vertices[face.b], this.geometry.vertices[face.d], lineColor); - addLine(this.geometry.vertices[face.c], this.geometry.vertices[face.d], lineColor); - - addPoint(this.geometry.vertices[face.a], pointColor); - addPoint(this.geometry.vertices[face.b], pointColor); - addPoint(this.geometry.vertices[face.c], pointColor); - addPoint(this.geometry.vertices[face.d], pointColor); - } - } - } - - let mousePos = new Point(); - - const canvasSpace = 200; + const light3 = new THREE.PointLight(0xffffff, 1, 50); + light3.position.set(0, -1, 40); + scene.add(light3); +} +/** + * setup THREE JS Scene, Camera and Renderer + */ +function setup_scene(canvasSpace) { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight - canvasSpace), 0.1, 1000); - 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 THREE.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); - let cloth = new Cloth(); - cloth.createBasic(10, 10, 5, 5); - cloth.createDebugMesh(scene); + /** position camera */ + camera.position.z = 2; + addLights(scene); + return [scene, camera, renderer]; +} - const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); - const mesh = new THREE.Mesh(cloth.geometry, material); - scene.add(mesh); +/** call "init" when document is fully loaded */ +document.body.onload = init; - camera.position.y = 5; - camera.position.z = 10; - //camera.lookAt(new THREE.Vector3(1, 0, 0)); +function init() { + let mousePos = new THREE.Vector2(); + + /** + * Space left empty under canvas + * for UI elements + */ + const canvasSpace = 200; + /** Constant Frame Time */ + const frameTime = 1000.0 / 200.0; + + /** Setup scene */ + let [scene, camera, renderer] = setup_scene(canvasSpace); + + const loader = new THREE.TextureLoader(); + //Red color: 0xC70039 + + /** Create cloth and generate mesh */ + const cloth = new Cloth(1, 0.5, 20, 20); + const clothGeometry = cloth.generateGeometry(); + const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/hsrm2.png'), color: 0xffffff, side: THREE.DoubleSide, flatShading: false }); + //const clothMaterial = new THREE.MeshStandardMaterial({ color: 0xC70039, side: THREE.DoubleSide, flatShading: false }); + const clothMesh = new THREE.Mesh(clothGeometry, clothMaterial); + scene.add(clothMesh); + + /** Register wind checkbox */ + document.getElementById("windToggle").checked = options.wind; + document.getElementById("windToggle").onchange = (e) => { + options.wind = e.target.checked; + }; + + let raycaster = new THREE.Raycaster(); + let intersects; + let windKeyDown = false; + let dragKeyDown = false; + let draggedIndex = -1; + /** + * function called every frame + * @param {number} dt - time passed since last frame in ms + */ function animate(dt) { - requestAnimationFrame(animate); + /** run simulation step */ + cloth.simulate(dt / 1000); + + cloth.updateGeometry(clothGeometry); + + /** raycast from camera to cursor */ + raycaster.setFromCamera(new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera); + intersects = raycaster.intersectObject(clothMesh); + + /** provide user interaction */ + if (intersects.length > 0) { + if (windKeyDown) + cloth.blow(camera.position, intersects); + /** "grab" vertex index */ + if (dragKeyDown && draggedIndex == -1) + draggedIndex = intersects[0].face.a; + } + if (dragKeyDown && draggedIndex != -1) + cloth.drag(calculateMousePosToWorld(mousePos), draggedIndex); + + /** queue next frame */ + setTimeout(() => { + animate(frameTime); + }, frameTime); + renderer.render(scene, camera); } + + /** add callback for window resize */ let canvas = document.getElementsByTagName("canvas")[0]; + let w = window.innerWidth; + let h = window.innerHeight - canvasSpace; let resize = function () { w = window.innerWidth; - h = window.innerHeight - 200; + h = window.innerHeight - canvasSpace; canvas.width = w; canvas.height = h; } window.onresize = resize; resize(); + + /** + * if canvas has been successfully initialized + * start rendering + */ if (canvas.getContext) { - animate(performance.now()); + animate(frameTime); } + + + + /** add mouse move callback */ canvas.onmousemove = (evt) => { mousePos.x = evt.clientX; mousePos.y = evt.clientY; }; + + /** + * Prevent context menu while blowing wind + */ + canvas.addEventListener('contextmenu', function(evt) { + evt.preventDefault(); + }, false); + + /** register key events */ + document.onkeydown = (evt) => { + if (evt.code === "KeyW") + windKeyDown = true; + if (evt.code === "KeyD") + dragKeyDown = true; + }; + + document.onkeyup = (evt) => { + if (evt.code === "KeyW") + windKeyDown = false; + if (evt.code === "KeyD") { + dragKeyDown = false; + draggedIndex = -1; + } + }; + + /** helper function to turn mouse position into 3D coordinates */ + function calculateMousePosToWorld(mousePos){ + var vec = new THREE.Vector3(); // create once and reuse + var pos = new THREE.Vector3(); // create once and reuse + + vec.set( + (mousePos.x / window.innerWidth) * 2 - 1, + - (mousePos.y / window.innerHeight) * 2 + 1, + 0.5); + + vec.unproject(camera); + + vec.sub(camera.position).normalize(); + + var distance = - camera.position.z / vec.z; + + pos.copy(camera.position).add(vec.multiplyScalar(distance)); + return pos; + } } \ No newline at end of file