X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/f48718f397ffbc1eb006460c495cf260668bd545..323d38f395da1cae25ba629d3365c37c30f53fdf:/Scripts/main.js?ds=sidebyside diff --git a/Scripts/main.js b/Scripts/main.js index fc797c8..d54aa9f 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,8 +1,7 @@ -import { Face, Spring, Cloth } from './cloth.js'; -import { OrbitControls } from './OrbitControls.js'; +//import { } from './cloth.js'; +//import { OrbitControls } from './OrbitControls.js'; function addLights(scene){ - scene.add( new THREE.AmbientLight( 0x222222 ) ); const light1 = new THREE.PointLight( 0xffffff, 1, 50 ); @@ -16,7 +15,6 @@ function addLights(scene){ const light3 = new THREE.PointLight( 0xffffff, 1, 50 ); light3.position.set( 0, -1, 40 ); scene.add( light3 ); - } /** @@ -33,7 +31,7 @@ function setup_scene(canvasSpace) { document.getElementById("threejscontainer").appendChild(renderer.domElement); /** add orbit controls */ - const controls = new OrbitControls(camera, renderer.domElement); + const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.target.set(0, 0, 0); controls.update(); @@ -69,7 +67,6 @@ document.body.onload = init; function init() { let mousePos = new THREE.Vector2(); - let previousClothSimulation; /** * Space left empty under canvas @@ -83,24 +80,15 @@ function init() { /** Setup scene */ let [scene, camera, renderer] = setup_scene(canvasSpace); - /** setup cloth and generate debug mesh */ - let cloth = new Cloth(); - cloth.createBasic(1, 0.5, 20, 20); - document.getElementById("windToggle").onchange = (e) => { - if (e.target.checked) - cloth.windFactor.set(0.5, 0.2, 0.2); - else - cloth.windFactor.set(0, 0, 0); - }; - //cloth.createDebugMesh(scene); - - - const material = new THREE.MeshStandardMaterial({ color: 0xC70039, side: THREE.DoubleSide, flatShading: false }); - const mesh = new THREE.Mesh(cloth.geometry, material); - - scene.add(mesh); - - + //const loader = new THREE.TextureLoader(); + //Red color: 0xC70039 + + const cloth = new Cloth(1, 0.5, 20, 10); + const clothGeometry = cloth.generateGeometry(); + //const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/DeutschlandFlagge.jpg'), 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); let raycaster = new THREE.Raycaster(); let intersects; @@ -110,15 +98,15 @@ function init() { * @param {number} dt - time passed since last frame in ms */ function animate(dt) { - cloth.simulate(dt/1000); - + // simulate cloth + raycaster.setFromCamera( new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera ); - intersects = raycaster.intersectObject( mesh ); + // intersects = raycaster.intersectObject( mesh ); - if ( intersects.length > 0 && rightMousePressed) { - cloth.wind(intersects); - } + // if ( intersects.length > 0 && rightMousePressed) { + // // Cloth mouse interaction + // } setTimeout(() => { animate(frameTime); }, frameTime); @@ -154,7 +142,7 @@ function init() { mousePos.x = evt.clientX; mousePos.y = evt.clientY; - cloth.mouseMove(calculateMousePosToWorld(evt)); + //cloth.mouseMove(calculateMousePosToWorld(evt)); }; /** @@ -171,12 +159,12 @@ function init() { rightMousePressed = evt.button == 2; if(intersects.length > 0 && evt.button == 0){ - cloth.mousePress(intersects); + //cloth.mousePress(intersects); } } canvas.onmouseup = (evt) => { - cloth.mouseRelease(); + //cloth.mouseRelease(); rightMousePressed = false; }