From: Patrick Schönberger <patrick.schoenberger@posteo.de>
Date: Sat, 6 Feb 2021 10:25:43 +0000 (+0100)
Subject: render cloth
X-Git-Url: https://gitweb.ps.run/cloth_sim/commitdiff_plain/323d38f395da1cae25ba629d3365c37c30f53fdf?ds=inline

render cloth
---

diff --git a/Scripts/cloth.js b/Scripts/cloth.js
index a05eb98..05ff6f1 100644
--- a/Scripts/cloth.js
+++ b/Scripts/cloth.js
@@ -1,3 +1,112 @@
 // cloth rendering
 // simulate
-// setup scene
\ No newline at end of file
+// setup scene
+
+const MASS = 0.1;
+
+class Particle {
+  constructor(x, y, z, mass) {
+    this.position = new THREE.Vector3(x, y, z);
+    this.previous = new THREE.Vector3(x, y, z);
+    this.acceleration = new THREE.Vector3(0, 0, 0);
+    this.mass = mass;
+  }
+  addForce(force) {
+
+  }
+  verlet(dt) {
+
+  }
+}
+
+class Cloth {
+  constructor(width, height, numPointsWidth, numPointsHeight) {
+    this.width = width;
+    this.height = height;
+    this.numPointsWidth = numPointsWidth;
+    this.numPointsHeight = numPointsHeight;
+
+    /**
+     * distance between two vertices horizontally/vertically
+     * divide by the number of points minus one
+     * because there are (n - 1) lines between n vertices
+     */
+    let stepWidth = width / (numPointsWidth - 1);
+    let stepHeight = height / (numPointsHeight - 1);
+
+    /**
+     * iterate over the number of vertices in x/y axis
+     * and add a new Particle to "particles"
+     */
+    this.particles = [];
+    for (let y = 0; y < numPointsHeight; y++) {
+      for (let x = 0; x < numPointsWidth; x++) {
+        this.particles.push(
+          new Particle(
+            (x - ((numPointsWidth-1)/2)) * stepWidth,
+            height - (y + ((numPointsHeight-1)/2)) * stepHeight,
+            0,
+            MASS)
+        );
+      }
+    }
+  }
+  generateGeometry() {
+    const geometry = new THREE.BufferGeometry();
+
+    const vertices = [];
+    const normals = [];
+    const indices = [];
+
+    for (let particle of this.particles) {
+      vertices.push(
+        particle.position.x,
+        particle.position.y,
+        particle.position.z);
+    }
+
+    const numPointsWidth = this.numPointsWidth;
+    const numPointsHeight = this.numPointsHeight;
+
+    /**
+     * helper function to calculate index of vertex
+     * in "vertices" array based on its x and y positions
+     * in the mesh
+     * @param {number} x - x index of vertex
+     * @param {number} y - y index of vertex
+     */
+    function getVertexIndex(x, y) {
+      return y * numPointsWidth + x;
+    }
+
+    /**
+     * generate faces based on 4 vertices
+     * and 6 springs each
+     */
+    for (let y = 0; y < numPointsHeight - 1; y++) {
+      for (let x = 0; x < numPointsWidth - 1; x++) {
+        indices.push(
+          getVertexIndex(x, y),
+          getVertexIndex(x+1, y),
+          getVertexIndex(x+1, y+1)
+        );
+        indices.push(
+          getVertexIndex(x, y),
+          getVertexIndex(x+1, y+1),
+          getVertexIndex(x, y+1)
+        );
+      }
+    }
+
+    geometry.setIndex(indices);
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
+    //geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+    geometry.computeBoundingSphere();
+    geometry.computeVertexNormals();
+
+    return geometry;
+  }
+  updateGeometry(geometry) {
+
+  }
+}
\ No newline at end of file
diff --git a/Scripts/main.js b/Scripts/main.js
index 4d87337..d54aa9f 100644
--- a/Scripts/main.js
+++ b/Scripts/main.js
@@ -79,8 +79,16 @@ function init() {
 
   /** Setup scene */
   let [scene, camera, renderer] = setup_scene(canvasSpace);
-
-  // Add Cloth Initialization
+  
+  //const loader = new THREE.TextureLoader();
+  //Red color: 0xC70039
+
+  const cloth = new Cloth(1, 0.5, 20, 10);
+  const clothGeometry = cloth.generateGeometry();
+  //const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/DeutschlandFlagge.jpg'), color: 0xffffff, side: THREE.DoubleSide, flatShading: false});
+  const clothMaterial = new THREE.MeshStandardMaterial({ color: 0xC70039, side: THREE.DoubleSide, flatShading: false });
+  const clothMesh = new THREE.Mesh(clothGeometry, clothMaterial);
+  scene.add(clothMesh);
   
   let raycaster = new THREE.Raycaster();
   let intersects;
diff --git a/index.html b/index.html
index 20f3ed0..14f79e4 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
 </head>
 
 <body>
+	<script src="./Scripts/cloth.js"></script>
 	<script src="./Scripts/main.js"></script>
 
 	<div id="threejscontainer"></div>