X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/f48718f397ffbc1eb006460c495cf260668bd545..8bf51c36d322cb8d4f099d3475563ee4e520ab92:/Scripts/main.js diff --git a/Scripts/main.js b/Scripts/main.js index fc797c8..5e68a4f 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,8 +1,6 @@ -import { Face, Spring, Cloth } 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 +14,6 @@ function addLights(scene){ const light3 = new THREE.PointLight( 0xffffff, 1, 50 ); light3.position.set( 0, -1, 40 ); scene.add( light3 ); - } /** @@ -33,7 +30,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 +66,6 @@ document.body.onload = init; function init() { let mousePos = new THREE.Vector2(); - let previousClothSimulation; /** * Space left empty under canvas @@ -78,30 +74,26 @@ function init() { const canvasSpace = 200; /** Constant Frame Time */ - const frameTime = 1000.0 / 60.0; + const frameTime = 1000.0 / 200.0; /** 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); + const loader = new THREE.TextureLoader(); + //Red color: 0xC70039 + + const cloth = new Cloth(1, 0.5, 20, 20); + const clothGeometry = cloth.generateGeometry(); + const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/hsrm.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); + + document.getElementById("windToggle").checked = options.wind; 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); + options.wind = e.target.checked; }; - //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); - - - let raycaster = new THREE.Raycaster(); let intersects; let rightMousePressed; @@ -110,15 +102,17 @@ function init() { * @param {number} dt - time passed since last frame in ms */ function animate(dt) { - cloth.simulate(dt/1000); + cloth.simulate(dt / 1000); + cloth.updateGeometry(clothGeometry); + 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 +148,7 @@ function init() { mousePos.x = evt.clientX; mousePos.y = evt.clientY; - cloth.mouseMove(calculateMousePosToWorld(evt)); + //cloth.mouseMove(calculateMousePosToWorld(evt)); }; /** @@ -171,12 +165,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; }