X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/14881afe547086f68764e27bd65c794b21271c63..b9cfb0c7bf25e9ebc0c21e0b32665113ea46f7b5:/Scripts/main.js diff --git a/Scripts/main.js b/Scripts/main.js index 8c61f82..e69de29 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,133 +0,0 @@ -import { Face, Spring, Cloth } from './cloth.js'; - - -/** - * rendering - * Einheiten konsistent - * Wind - * evtl. an Stoff ziehen - */ - - -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) - } -} - - -/** - * 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 global light */ - const directionalLight = new THREE.DirectionalLight(0xffffff, 1); - scene.add(directionalLight); - - /** position camera */ - camera.position.y = 5; - camera.position.z = 10; - - return [scene, camera, renderer]; -} - -/** call "init" when document is fully loaded */ -document.body.onload = init; - -function init() { - let mousePos = new Point(); - let previousClothSimulation; - - /** - * Space left empty under canvas - * for UI elements - */ - const canvasSpace = 200; - - /** Constant Frame Time */ - const frameTime = 1000.0 / 60.0; - - /** Setup scene */ - let [scene, camera, renderer] = setup_scene(canvasSpace); - - /** setup cloth and generate debug mesh */ - let cloth = new Cloth(); - cloth.createBasic(10, 10, 10, 10); - //cloth.createDebugMesh(scene); - - const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); - const mesh = new THREE.Mesh(cloth.geometry, material); - //const mesh = new THREE.WireframeGeometry(cloth.geometry); - //const line = new THREE.LineSegments(mesh); - //line.material.depthTest = false; - //line.material.opacity = 0.25; - //line.material.transparent = true; - scene.add(mesh); - - /** - * function called every frame - * @param {number} dt - time passed since last frame in ms - */ - function animate(dt) { - cloth.simulate(dt/1000); - - setTimeout(() => { - animate(frameTime); - }, frameTime); - renderer.render(scene, camera); - } - - /** add callback for window resize */ - let canvas = document.getElementsByTagName("canvas")[0]; - let resize = function () { - let w = window.innerWidth; - let h = window.innerHeight - 200; - canvas.width = w; - canvas.height = h; - } - window.onresize = resize; - resize(); - - /** - * if canvas has been successfully initialized - * start rendering - */ - if (canvas.getContext) { - animate(performance.now()); - } - - /** add mouse move callback */ - canvas.onmousemove = (evt) => { - mousePos.x = evt.clientX; - mousePos.y = evt.clientY; - }; -} \ No newline at end of file