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

   1 function init() {\r
   2   class Point {\r
   3     constructor(x, y) {\r
   4       this.x = x;\r
   5       this.y = y;\r
   6     }\r
   7 \r
   8     add(that) {\r
   9       return new Point(\r
  10         this.x + that.x,\r
  11         this.y + that.y\r
  12       );\r
  13     }\r
  14 \r
  15     sub(that) {\r
  16       return new Point(\r
  17         this.x - that.x,\r
  18         this.y - that.y\r
  19       );\r
  20     }\r
  21 \r
  22     dist(that) {\r
  23       let a = this.x - that.x;\r
  24       let b = this.y - that.y;\r
  25       return Math.sqrt(a * a + b * b)\r
  26     }\r
  27   }\r
  28 \r
  29   class Face {\r
  30     indices = [];\r
  31 \r
  32     constructor(a, b, c, d) {\r
  33       this.indices.push(a);\r
  34       this.indices.push(b);\r
  35       this.indices.push(c);\r
  36       this.indices.push(d);\r
  37     }\r
  38   }\r
  39 \r
  40   class Cloth {\r
  41     VertexWeight = 1;\r
  42 \r
  43     geometry = new THREE.Geometry();\r
  44 \r
  45     faces = [];\r
  46 \r
  47     vertexWeights = [];\r
  48 \r
  49     springs = [];\r
  50 \r
  51     getSprings(faceIndex) {\r
  52 \r
  53     }\r
  54 \r
  55     static CreateBasic(width, height, numPointsWidth, numPointsHeight) {\r
  56       let vertices = [];\r
  57       let faces = [];\r
  58 \r
  59       let stepWidth = width / (numPointsWidth - 1);\r
  60       let stepHeight = height / (numPointsHeight - 1);\r
  61 \r
  62       for (let y = 0; y < numPointsHeight; y++) {\r
  63         for (let x = 0; x < numPointsWidth; x++) {\r
  64           vertices.push(\r
  65             new THREE.Vector3(x * stepWidth, height - y * stepHeight, 0)\r
  66           );\r
  67         }\r
  68       }\r
  69 \r
  70       function getVertexIndex(x, y) {\r
  71         return y * numPointsWidth + x;\r
  72       }\r
  73       \r
  74       for (let y = 0; y < numPointsHeight - 1; y++) {\r
  75         for (let x = 0; x < numPointsWidth - 1; x++) {\r
  76           faces.push(\r
  77             new Face(\r
  78               getVertexIndex(x, y),\r
  79               getVertexIndex(x, y + 1),\r
  80               getVertexIndex(x + 1, y),\r
  81               getVertexIndex(x + 1, y + 1),\r
  82             )\r
  83           );\r
  84         }\r
  85       }\r
  86 \r
  87       return this.CreateExplicit(vertices, faces);\r
  88     }\r
  89 \r
  90     static CreateExplicit(vertices, faces) {\r
  91       let result = new Cloth();\r
  92 \r
  93       for (let i in vertices) {\r
  94         result.geometry.vertices.push(vertices[i]);\r
  95         result.vertexWeights.push(0);\r
  96       }\r
  97       for (let i in faces) {\r
  98         let face = faces[i];\r
  99 \r
 100         result.geometry.faces.push(new THREE.Face3(\r
 101           face.a, face.b, face.c\r
 102         ));\r
 103         result.geometry.faces.push(new THREE.Face3(\r
 104           face.c, face.b, face.d\r
 105         ));\r
 106         \r
 107         let xLength =\r
 108           result.geometry.vertices[face.b]\r
 109           .sub(result.geometry.vertices[face.a])\r
 110           .length();\r
 111         let yLength =\r
 112           result.geometry.vertices[face.c]\r
 113           .sub(result.geometry.vertices[face.a])\r
 114           .length();\r
 115         let weight = xLength * yLength / 2;\r
 116 \r
 117         xLength =\r
 118           result.geometry.vertices[face.b]\r
 119           .sub(result.geometry.vertices[face.d])\r
 120           .length();\r
 121         yLength =\r
 122           result.geometry.vertices[face.c]\r
 123           .sub(result.geometry.vertices[face.d])\r
 124           .length();\r
 125 \r
 126         weight += xLength * yLength / 2;\r
 127 \r
 128         result.vertexWeights[face.a] += weight / 4;\r
 129         result.vertexWeights[face.b] += weight / 4;\r
 130         result.vertexWeights[face.c] += weight / 4;\r
 131         result.vertexWeights[face.d] += weight / 4;\r
 132       }\r
 133 \r
 134       result.geometry.computeBoundingSphere();\r
 135 \r
 136       return result;\r
 137     }\r
 138   }\r
 139 \r
 140   let mousePos = new Point();\r
 141 \r
 142   const canvasSpace = 200;\r
 143 \r
 144   const scene = new THREE.Scene();\r
 145   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight - canvasSpace), 0.1, 1000);\r
 146 \r
 147   const renderer = new THREE.WebGLRenderer();\r
 148   renderer.setSize(window.innerWidth, window.innerHeight - canvasSpace);\r
 149   document.getElementById("threejscontainer").appendChild(renderer.domElement);\r
 150 \r
 151   const directionalLight = new THREE.DirectionalLight(0xffffff, 1);\r
 152   scene.add(directionalLight);\r
 153 \r
 154   let cloth = Cloth.CreateBasic(10, 10, 4, 4);\r
 155   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });\r
 156   const mesh = new THREE.Mesh(cloth.geometry, material);\r
 157   scene.add(mesh);\r
 158 \r
 159   camera.position.y = 5;\r
 160   camera.position.z = 10;\r
 161 \r
 162   function animate(dt) {\r
 163     requestAnimationFrame(animate);\r
 164     renderer.render(scene, camera);\r
 165   }\r
 166 \r
 167   let canvas = document.getElementsByTagName("canvas")[0];\r
 168   let resize = function () {\r
 169     w = window.innerWidth;\r
 170     h = window.innerHeight - 200;\r
 171     canvas.width = w;\r
 172     canvas.height = h;\r
 173   }\r
 174   window.onresize = resize;\r
 175   resize();\r
 176   if (canvas.getContext) {\r
 177     ctx = canvas.getContext('2d');\r
 178     animate(performance.now());\r
 179   }\r
 180   canvas.onmousemove = (evt) => {\r
 181     mousePos.x = evt.clientX;\r
 182     mousePos.y = evt.clientY;\r
 183   };\r
 184 }