X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/c061ca66adc53232724ce9991fbe8d10c041af36..8ecb6f064f0708ed010f1239a7bddc283411b6e7:/Scripts/main.js diff --git a/Scripts/main.js b/Scripts/main.js index 2388293..588e8f1 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,184 +1,172 @@ -function init() { - class Point { - constructor(x, y) { - this.x = x; - this.y = y; - } +import { Face, Spring, Cloth } from './cloth.js'; + +function addLights(scene){ + + scene.add( new THREE.AmbientLight( 0x222222 ) ); + + const light1 = new THREE.PointLight( 0xffffff, 1, 50 ); + light1.position.set( 15, 1, 40 ); + scene.add( light1 ); + + const light2 = new THREE.PointLight( 0xffffff, 1, 50 ); + light2.position.set( -15, 0, 40 ); + scene.add( light2 ); + + 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); + /** embed canvas in HTML */ + document.getElementById("threejscontainer").appendChild(renderer.domElement); - add(that) { - return new Point( - this.x + that.x, - this.y + that.y - ); - } + /** add global light */ + const directionalLight = new THREE.DirectionalLight(0xffffff, 1); + scene.add(directionalLight); - sub(that) { - return new Point( - this.x - that.x, - this.y - that.y - ); - } + /** position camera */ + camera.position.y = 3; + camera.position.z = 10; + addLights(scene); + return [scene, camera, renderer]; +} - dist(that) { - let a = this.x - that.x; - let b = this.y - that.y; - return Math.sqrt(a * a + b * b) - } - } +/** call "init" when document is fully loaded */ +document.body.onload = init; - class Face { - indices = []; +function init() { + let mousePos = new THREE.Vector2(); + let previousClothSimulation; + + /** + * Space left empty under canvas + * for UI elements + */ + const canvasSpace = 200; - constructor(a, b, c, d) { - this.indices.push(a); - this.indices.push(b); - this.indices.push(c); - this.indices.push(d); - } - } + /** Constant Frame Time */ + const frameTime = 1000.0 / 60.0; - class Cloth { - VertexWeight = 1; + /** Setup scene */ + let [scene, camera, renderer] = setup_scene(canvasSpace); + + /** setup cloth and generate debug mesh */ + let cloth = new Cloth(); + cloth.createBasic(10, 10, 20, 20); + //cloth.createDebugMesh(scene); - geometry = new THREE.Geometry(); - faces = []; + const material = new THREE.MeshStandardMaterial({ color: 0xC70039, side: THREE.DoubleSide, flatShading: false }); + const mesh = new THREE.Mesh(cloth.geometry, material); - vertexWeights = []; + scene.add(mesh); - springs = []; - getSprings(faceIndex) { + + let raycaster = new THREE.Raycaster(); + let intersects; + let rightMousePressed; + /** + * function called every frame + * @param {number} dt - time passed since last frame in ms + */ + function animate(dt) { + cloth.simulate(dt/1000); - } + raycaster.setFromCamera( new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera ); - 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++) { - faces.push( - new Face( - getVertexIndex(x, y), - getVertexIndex(x, y + 1), - getVertexIndex(x + 1, y), - getVertexIndex(x + 1, y + 1), - ) - ); - } - } - - return this.CreateExplicit(vertices, faces); - } + intersects = raycaster.intersectObject( mesh ); - static CreateExplicit(vertices, faces) { - let result = new Cloth(); - - for (let i in vertices) { - result.geometry.vertices.push(vertices[i]); - result.vertexWeights.push(0); - } - 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 - )); - - let xLength = - result.geometry.vertices[face.b] - .sub(result.geometry.vertices[face.a]) - .length(); - let yLength = - result.geometry.vertices[face.c] - .sub(result.geometry.vertices[face.a]) - .length(); - let weight = xLength * yLength / 2; - - xLength = - result.geometry.vertices[face.b] - .sub(result.geometry.vertices[face.d]) - .length(); - yLength = - result.geometry.vertices[face.c] - .sub(result.geometry.vertices[face.d]) - .length(); - - 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; + if ( intersects.length > 0 && rightMousePressed) { + cloth.wind(intersects); } - } - - 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, 4, 4); - 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); + 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) { - ctx = canvas.getContext('2d'); animate(performance.now()); } + + + + /** add mouse move callback */ canvas.onmousemove = (evt) => { mousePos.x = evt.clientX; mousePos.y = evt.clientY; + + cloth.mouseMove(calculateMousePosToWorld(evt)); }; + + /** + * Prevent context menu while blowing wind + */ + canvas.addEventListener('contextmenu', function(evt) { + evt.preventDefault(); + }, false); + + + canvas.onmousedown = (evt) => { + + // Check mouse click + rightMousePressed = evt.button == 2; + + if(intersects.length > 0 && evt.button == 0){ + cloth.mousePress(intersects); + } + } + + canvas.onmouseup = (evt) => { + cloth.mouseRelease(); + rightMousePressed = false; + } + + function calculateMousePosToWorld(evt){ + var vec = new THREE.Vector3(); // create once and reuse + var pos = new THREE.Vector3(); // create once and reuse + + vec.set( + ( evt.clientX / window.innerWidth ) * 2 - 1, + - ( evt.clientY / 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