X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/590349d576668595128e2d15bbd72e9391a97fc1..8ecb6f064f0708ed010f1239a7bddc283411b6e7:/Scripts/main.js diff --git a/Scripts/main.js b/Scripts/main.js index 20a6e92..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,27 +62,20 @@ 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.MeshPhongMaterial({ 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( 0x666666 ) ); - const light = new THREE.DirectionalLight( 0xffffff, 0.5 ); - light.position.set( 0, 1, 0.5 ); - scene.add( light ); let raycaster = new THREE.Raycaster(); - + let intersects; + let rightMousePressed; /** * function called every frame * @param {number} dt - time passed since last frame in ms @@ -82,9 +85,9 @@ function init() { raycaster.setFromCamera( new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera ); - const intersects = raycaster.intersectObject( mesh ); + intersects = raycaster.intersectObject( mesh ); - if ( intersects.length > 0 ) { + if ( intersects.length > 0 && rightMousePressed) { cloth.wind(intersects); } setTimeout(() => { @@ -115,9 +118,55 @@ function init() { animate(performance.now()); } + + /** add mouse move callback */ canvas.onmousemove = (evt) => { 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 + + vec.set( + ( evt.clientX / window.innerWidth ) * 2 - 1, + - ( evt.clientY / window.innerHeight ) * 2 + 1, + 0.5 ); + + vec.unproject( camera ); + + vec.sub( camera.position ).normalize(); + + var distance = - camera.position.z / vec.z; + + pos.copy( camera.position ).add( vec.multiplyScalar( distance ) ); + return pos; + } } \ No newline at end of file