gitweb.ps.run Git - cloth_sim/blob - Scripts/main.js

   1 import { Face, Spring, Cloth } from './cloth.js';\r
   2 \r
   3 \r
   4 class Point {\r
   5   constructor(x, y) {\r
   6     this.x = x;\r
   7     this.y = y;\r
   8   }\r
   9 \r
  10   add(that) {\r
  11     return new Point(\r
  12       this.x + that.x,\r
  13       this.y + that.y\r
  14     );\r
  15   }\r
  16 \r
  17   sub(that) {\r
  18     return new Point(\r
  19       this.x - that.x,\r
  20       this.y - that.y\r
  21     );\r
  22   }\r
  23 \r
  24   dist(that) {\r
  25     let a = this.x - that.x;\r
  26     let b = this.y - that.y;\r
  27     return Math.sqrt(a * a + b * b)\r
  28   }\r
  29 }\r
  30 \r
  31 \r
  32 /**\r
  33  * setup THREE JS Scene, Camera and Renderer\r
  34  */\r
  35 function setup_scene(canvasSpace) {\r
  36   const scene = new THREE.Scene();\r
  37   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight - canvasSpace), 0.1, 1000);\r
  38   const renderer = new THREE.WebGLRenderer();\r
  39   /** size canvas to leave some space for UI */\r
  40   renderer.setSize(window.innerWidth, window.innerHeight - canvasSpace);\r
  41   /** embed canvas in HTML */\r
  42   document.getElementById("threejscontainer").appendChild(renderer.domElement);\r
  43 \r
  44   /** add global light */\r
  45   const directionalLight = new THREE.DirectionalLight(0xffffff, 1);\r
  46   scene.add(directionalLight);\r
  47 \r
  48   /** position camera */\r
  49   camera.position.y = 5;\r
  50   camera.position.z = 10;\r
  51 \r
  52   return [scene, camera, renderer];\r
  53 }\r
  54 \r
  55 /** call "init" when document is fully loaded */\r
  56 document.body.onload = init;\r
  57 \r
  58 function init() {\r
  59   let mousePos = new Point();\r
  60 \r
  61   /**\r
  62    * Space left empty under canvas\r
  63    * for UI elements\r
  64    */\r
  65   const canvasSpace = 200;\r
  66 \r
  67   /** Setup scene */\r
  68   let [scene, camera, renderer] = setup_scene(canvasSpace);\r
  69   \r
  70   /** setup cloth and generate debug mesh */\r
  71   let cloth = new Cloth();\r
  72   cloth.createBasic(10, 10, 5, 5);\r
  73   cloth.createDebugMesh(scene);\r
  74 \r
  75   const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });\r
  76   const mesh = new THREE.Mesh(cloth.geometry, material);\r
  77   scene.add(mesh);\r
  78 \r
  79   /**\r
  80    * function called every frame\r
  81    * @param {number} dt - time passed since last frame\r
  82    */\r
  83   function animate(dt) {\r
  84     requestAnimationFrame(animate);\r
  85     renderer.render(scene, camera);\r
  86   }\r
  87 \r
  88   /** add callback for window resize */\r
  89   let canvas = document.getElementsByTagName("canvas")[0];\r
  90   let resize = function () {\r
  91     let w = window.innerWidth;\r
  92     let h = window.innerHeight - 200;\r
  93     canvas.width = w;\r
  94     canvas.height = h;\r
  95   }\r
  96   window.onresize = resize;\r
  97   resize();\r
  98 \r
  99   /**\r
 100    * if canvas has been successfully initialized\r
 101    * start rendering\r
 102    */\r
 103   if (canvas.getContext) {\r
 104     animate(performance.now());\r
 105   }\r
 106 \r
 107   /** add mouse move callback */\r
 108   canvas.onmousemove = (evt) => {\r
 109     mousePos.x = evt.clientX;\r
 110     mousePos.y = evt.clientY;\r
 111   };\r
 112 }