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   let previousClothSimulation;\r
  61   \r
  62   /**\r
  63    * Space left empty under canvas\r
  64    * for UI elements\r
  65    */\r
  66   const canvasSpace = 200;\r
  67 \r
  68   /** Setup scene */\r
  69   let [scene, camera, renderer] = setup_scene(canvasSpace);\r
  70   \r
  71   /** setup cloth and generate debug mesh */\r
  72   let cloth = new Cloth();\r
  73   cloth.createBasic(10, 10, 5, 5);\r
  74   cloth.createDebugMesh(scene);\r
  75 \r
  76   const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });\r
  77   const mesh = new THREE.Mesh(cloth.geometry, material);\r
  78   //const mesh = new THREE.WireframeGeometry(cloth.geometry);\r
  79   //const line = new THREE.LineSegments(mesh);\r
  80   //line.material.depthTest = false;\r
  81   //line.material.opacity = 0.25;\r
  82   //line.material.transparent = true;\r
  83   scene.add(mesh);\r
  84 \r
  85   /**\r
  86    * function called every frame\r
  87    * @param {number} dt - time passed since last frame\r
  88    */\r
  89   function animate(dt) {\r
  90     \r
  91     cloth.simulate(dt);\r
  92 \r
  93     setTimeout(() => {\r
  94       animate(2000);\r
  95     }, 2000);\r
  96     renderer.render(scene, camera);\r
  97   }\r
  98 \r
  99   /** add callback for window resize */\r
 100   let canvas = document.getElementsByTagName("canvas")[0];\r
 101   let resize = function () {\r
 102     let w = window.innerWidth;\r
 103     let h = window.innerHeight - 200;\r
 104     canvas.width = w;\r
 105     canvas.height = h;\r
 106   }\r
 107   window.onresize = resize;\r
 108   resize();\r
 109 \r
 110   /**\r
 111    * if canvas has been successfully initialized\r
 112    * start rendering\r
 113    */\r
 114   if (canvas.getContext) {\r
 115     animate(performance.now());\r
 116   }\r
 117 \r
 118   /** add mouse move callback */\r
 119   canvas.onmousemove = (evt) => {\r
 120     mousePos.x = evt.clientX;\r
 121     mousePos.y = evt.clientY;\r
 122   };\r
 123 }