X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/1e3751f45e04a76ce2b11c67aa70e7c65efaad89..8ecb6f064f0708ed010f1239a7bddc283411b6e7:/Scripts/main.js diff --git a/Scripts/main.js b/Scripts/main.js index c269982..588e8f1 100644 --- a/Scripts/main.js +++ b/Scripts/main.js @@ -1,12 +1,22 @@ import { Face, Spring, Cloth } from './cloth.js'; +function addLights(scene){ + + scene.add( new THREE.AmbientLight( 0x222222 ) ); -/** - * rendering - * Einheiten konsistent - * Wind - * evtl. an Stoff ziehen - */ + 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 @@ -25,9 +35,9 @@ function setup_scene(canvasSpace) { scene.add(directionalLight); /** position camera */ - camera.position.y = 5; + camera.position.y = 3; camera.position.z = 10; - + addLights(scene); return [scene, camera, renderer]; } @@ -52,30 +62,16 @@ function init() { /** setup cloth and generate debug mesh */ let cloth = new Cloth(); - cloth.createBasic(10, 10, 10, 10); + cloth.createBasic(10, 10, 20, 20); //cloth.createDebugMesh(scene); - //const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, side: THREE.DoubleSide }); + const material = new THREE.MeshStandardMaterial({ color: 0xC70039, side: THREE.DoubleSide, flatShading: false }); 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); - 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 ); let raycaster = new THREE.Raycaster(); let intersects; @@ -91,7 +87,7 @@ function init() { intersects = raycaster.intersectObject( mesh ); - if ( intersects.length > 0 ) { + if ( intersects.length > 0 && rightMousePressed) { cloth.wind(intersects); } setTimeout(() => { @@ -129,6 +125,33 @@ function init() { 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 @@ -144,17 +167,6 @@ function init() { var distance = - camera.position.z / vec.z; pos.copy( camera.position ).add( vec.multiplyScalar( distance ) ); - - cloth.mouseMove(pos); - }; - - canvas.onmousedown = (evt) => { - if(intersects.length > 0){ - cloth.mousePress(intersects); - } - } - - canvas.onmouseup = (evt) => { - cloth.mouseRelease(); + return pos; } } \ No newline at end of file