From 8bf51c36d322cb8d4f099d3475563ee4e520ab92 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Patrick=20Sch=C3=B6nberger?= <patrick.schoenberger@posteo.de>
Date: Sat, 6 Feb 2021 13:57:27 +0100
Subject: [PATCH 1/1] uv mapping, add texture to flag

---
 Scripts/cloth.js | 32 +++++++++++++++++---------------
 Scripts/main.js  | 10 +++++-----
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/Scripts/cloth.js b/Scripts/cloth.js
index ff55549..5a7a0f2 100644
--- a/Scripts/cloth.js
+++ b/Scripts/cloth.js
@@ -4,6 +4,8 @@ const MASS = 0.1;
 const GRAVITY = new THREE.Vector3(0, -9.81 * MASS, 0);
 const K = 1;
 
+// Flag Texture
+
 const options = {
   wind: true,
 };
@@ -143,25 +145,27 @@ class Cloth {
     const geometry = new THREE.BufferGeometry();
 
     const vertices = [];
-    const normals = [];
     const indices = [];
+    const uvs = [];
 
-    for (let particle of this.particles) {
+    for (let i in this.particles) {
+      let particle = this.particles[i];
       vertices.push(
         particle.position.x,
         particle.position.y,
         particle.position.z);
+      uvs.push(
+        this.getX(i) / (this.numPointsWidth-1),
+        1 - (this.getY(i) / (this.numPointsHeight-1))
+      );
     }
 
-    const numPointsWidth = this.numPointsWidth;
-    const numPointsHeight = this.numPointsHeight;
-
     /**
      * 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++) {
+    for (let y = 0; y < this.numPointsHeight - 1; y++) {
+      for (let x = 0; x < this.numPointsWidth - 1; x++) {
         indices.push(
           this.getVertexIndex(x, y),
           this.getVertexIndex(x+1, y),
@@ -177,7 +181,7 @@ class Cloth {
 
     geometry.setIndex(indices);
     geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
-    //geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
     geometry.computeBoundingSphere();
     geometry.computeVertexNormals();
 
@@ -223,10 +227,6 @@ class Cloth {
   }
 
   intersect() {
-    let npw = this.numPointsWidth;
-    function getX(i) { return i % npw; }
-    function getY(i) { return Math.floor(i / npw); }
-
     for (let i in this.particles) {
       for (let j in this.particles) {  
         let p1 = this.particles[i];
@@ -235,14 +235,14 @@ class Cloth {
         p1.movableTmp = true;
         p2.movableTmp = true;
 
-        if (i == j || (Math.abs(getX(i) - getX(j)) == 1 && Math.abs(getY(i) - getY(j)) == 1))
+        if (i == j || (Math.abs(this.getX(i) - this.getX(j)) == 1 && Math.abs(this.getY(i) - this.getY(j)) == 1))
           continue;
 
         let dist = p1.position.distanceTo(p2.position);
         const collisionDistance = Math.min(this.width / this.numPointsWidth, this.height / this.numPointsHeight);
         if (dist < collisionDistance) {
-          p1.movableTmp = false;
-          p2.movableTmp = false;
+          // p1.movableTmp = false;
+          // p2.movableTmp = false;
           let diff = p1.position.clone().sub(p2.position).normalize();
           diff.multiplyScalar((collisionDistance - dist) * 1.001 / 2);
           if (p1.movable)
@@ -264,4 +264,6 @@ class Cloth {
   getVertexIndex(x, y) {
     return y * this.numPointsWidth + x;
   }
+  getX(i) { return i % this.numPointsWidth; }
+  getY(i) { return Math.floor(i / this.numPointsWidth); }
 }
\ No newline at end of file
diff --git a/Scripts/main.js b/Scripts/main.js
index 6fa9f22..5e68a4f 100644
--- a/Scripts/main.js
+++ b/Scripts/main.js
@@ -1,5 +1,4 @@
-//import {  } from './cloth.js';
-//import { OrbitControls } from './OrbitControls.js';
+
 
 function addLights(scene){
   scene.add( new THREE.AmbientLight( 0x222222 ) );
@@ -80,16 +79,17 @@ function init() {
   /** Setup scene */
   let [scene, camera, renderer] = setup_scene(canvasSpace);
   
-  //const loader = new THREE.TextureLoader();
+  const loader = new THREE.TextureLoader();
   //Red color: 0xC70039
 
   const cloth = new Cloth(1, 0.5, 20, 20);
   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 clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/hsrm.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);
   
+  document.getElementById("windToggle").checked = options.wind;
   document.getElementById("windToggle").onchange = (e) => {
     options.wind = e.target.checked;
   };
-- 
2.50.1