X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/f48718f397ffbc1eb006460c495cf260668bd545..HEAD:/Scripts/main.js diff --git a/Scripts/main.js b/Scripts/main.js deleted file mode 100644 index fc797c8..0000000 --- a/Scripts/main.js +++ /dev/null @@ -1,201 +0,0 @@ -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 ); - 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 - */ -function setup_scene(canvasSpace) { - const scene = new THREE.Scene(); - const camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight - canvasSpace), 0.1, 1000); - const renderer = new THREE.WebGLRenderer(); - /** size canvas to leave some space for UI */ - renderer.setSize(window.innerWidth, window.innerHeight - canvasSpace); - renderer.antialias = true; - /** embed canvas in HTML */ - document.getElementById("threejscontainer").appendChild(renderer.domElement); - - /** add orbit controls */ - const controls = new OrbitControls(camera, renderer.domElement); - controls.target.set(0, 0, 0); - controls.update(); - - /** add scene background */ - const loader = new THREE.TextureLoader(); - const texture = loader.load( - 'Textures/tears_of_steel_bridge_2k.jpg', - () => { - const rt = new THREE.WebGLCubeRenderTarget(texture.image.height); - rt.fromEquirectangularTexture(renderer, texture); - scene.background = rt; - }); - - /** add flag pole */ - const geometry = new THREE.CylinderGeometry( 0.02, 0.02, 5, 32 ); - const material = new THREE.MeshStandardMaterial( {color: 0xffffff} ); - const cylinder = new THREE.Mesh( geometry, material ); - cylinder.position.set(-0.5, -2.25, 0); - scene.add( cylinder ); - - /** add global light */ - const directionalLight = new THREE.DirectionalLight(0xffffff, 1); - scene.add(directionalLight); - - /** position camera */ - camera.position.z = 2; - addLights(scene); - return [scene, camera, renderer]; -} - -/** call "init" when document is fully loaded */ -document.body.onload = init; - -function init() { - let mousePos = new THREE.Vector2(); - let previousClothSimulation; - - /** - * Space left empty under canvas - * for UI elements - */ - const canvasSpace = 200; - - /** Constant Frame Time */ - const frameTime = 1000.0 / 60.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); - 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); - - - - let raycaster = new THREE.Raycaster(); - let intersects; - let rightMousePressed; - /** - * function called every frame - * @param {number} dt - time passed since last frame in ms - */ - function animate(dt) { - cloth.simulate(dt/1000); - - raycaster.setFromCamera( new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera ); - - intersects = raycaster.intersectObject( mesh ); - - if ( intersects.length > 0 && rightMousePressed) { - 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 () { - w = window.innerWidth; - h = window.innerHeight - canvasSpace; - canvas.width = w; - canvas.height = h; - } - window.onresize = resize; - resize(); - - /** - * if canvas has been successfully initialized - * start rendering - */ - if (canvas.getContext) { - 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