X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/a30256db1a628e1fd7f9a1537bebb9bdea8f3719..590349d576668595128e2d15bbd72e9391a97fc1:/Scripts/main.js diff --git a/Scripts/main.js b/Scripts/main.js index ececd6a..20a6e92 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,33 +1,12 @@ import { Face, Spring, Cloth } from './cloth.js'; -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) - } -} - +/** + * rendering + * Einheiten konsistent + * Wind + * evtl. an Stoff ziehen + */ /** * setup THREE JS Scene, Camera and Renderer @@ -56,7 +35,7 @@ function setup_scene(canvasSpace) { document.body.onload = init; function init() { - let mousePos = new Point(); + let mousePos = new THREE.Vector2(); let previousClothSimulation; /** @@ -76,7 +55,8 @@ function init() { cloth.createBasic(10, 10, 10, 10); //cloth.createDebugMesh(scene); - const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); + //const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide }); + const material = new THREE.MeshPhongMaterial({ color: 0x0000ff, side: THREE.DoubleSide }); const mesh = new THREE.Mesh(cloth.geometry, material); //const mesh = new THREE.WireframeGeometry(cloth.geometry); //const line = new THREE.LineSegments(mesh); @@ -85,24 +65,42 @@ function init() { //line.material.transparent = true; scene.add(mesh); + scene.add( new THREE.AmbientLight( 0x666666 ) ); + + const light = new THREE.DirectionalLight( 0xffffff, 0.5 ); + light.position.set( 0, 1, 0.5 ); + scene.add( light ); + + let raycaster = new THREE.Raycaster(); + /** * function called every frame - * @param {number} dt - time passed since last frame + * @param {number} dt - time passed since last frame in ms */ function animate(dt) { - cloth.simulate(dt); + cloth.simulate(dt/1000); + + raycaster.setFromCamera( new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera ); + const intersects = raycaster.intersectObject( mesh ); + + if ( intersects.length > 0 ) { + cloth.wind(intersects); + } 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 () { - let w = window.innerWidth; - let h = window.innerHeight - 200; + w = window.innerWidth; + h = window.innerHeight - canvasSpace; canvas.width = w; canvas.height = h; }