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