uv mapping, add texture to flag

diff --git a/Scripts/cloth.js b/Scripts/cloth.js
index ff55549b740bd9dd129c4a51c142c31be42751f6..5a7a0f214a7573b5f360215c680aafba4412b570 100644 (file)
--- 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);\r
 const K = 1;\r
 \r
 const GRAVITY = new THREE.Vector3(0, -9.81 * MASS, 0);\r
 const K = 1;\r
 \r

+// Flag Texture\r
+\r

 const options = {\r
   wind: true,\r
 };\r
 const options = {\r
   wind: true,\r
 };\r


@@ -143,25 +145,27 @@ class Cloth {
     const geometry = new THREE.BufferGeometry();\r
 \r
     const vertices = [];\r
     const geometry = new THREE.BufferGeometry();\r
 \r
     const vertices = [];\r

-    const normals = [];\r

     const indices = [];\r
     const indices = [];\r

+    const uvs = [];\r

 \r
 \r

-    for (let particle of this.particles) {\r
+    for (let i in this.particles) {\r
+      let particle = this.particles[i];\r

       vertices.push(\r
         particle.position.x,\r
         particle.position.y,\r
         particle.position.z);\r
       vertices.push(\r
         particle.position.x,\r
         particle.position.y,\r
         particle.position.z);\r

+      uvs.push(\r
+        this.getX(i) / (this.numPointsWidth-1),\r
+        1 - (this.getY(i) / (this.numPointsHeight-1))\r
+      );\r

     }\r
 \r
     }\r
 \r

-    const numPointsWidth = this.numPointsWidth;\r
-    const numPointsHeight = this.numPointsHeight;\r
-\r

     /**\r
      * generate faces based on 4 vertices\r
      * and 6 springs each\r
      */\r
     /**\r
      * generate faces based on 4 vertices\r
      * and 6 springs each\r
      */\r

-    for (let y = 0; y < numPointsHeight - 1; y++) {\r
-      for (let x = 0; x < numPointsWidth - 1; x++) {\r
+    for (let y = 0; y < this.numPointsHeight - 1; y++) {\r
+      for (let x = 0; x < this.numPointsWidth - 1; x++) {\r

         indices.push(\r
           this.getVertexIndex(x, y),\r
           this.getVertexIndex(x+1, y),\r
         indices.push(\r
           this.getVertexIndex(x, y),\r
           this.getVertexIndex(x+1, y),\r


@@ -177,7 +181,7 @@ class Cloth {
 \r
     geometry.setIndex(indices);\r
     geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));\r
 \r
     geometry.setIndex(indices);\r
     geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));\r

-    //geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));\r
+    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));\r

     geometry.computeBoundingSphere();\r
     geometry.computeVertexNormals();\r
 \r
     geometry.computeBoundingSphere();\r
     geometry.computeVertexNormals();\r
 \r


@@ -223,10 +227,6 @@ class Cloth {
   }\r
 \r
   intersect() {\r
   }\r
 \r
   intersect() {\r

-    let npw = this.numPointsWidth;\r
-    function getX(i) { return i % npw; }\r
-    function getY(i) { return Math.floor(i / npw); }\r
-\r

     for (let i in this.particles) {\r
       for (let j in this.particles) {  \r
         let p1 = this.particles[i];\r
     for (let i in this.particles) {\r
       for (let j in this.particles) {  \r
         let p1 = this.particles[i];\r


@@ -235,14 +235,14 @@ class Cloth {
         p1.movableTmp = true;\r
         p2.movableTmp = true;\r
 \r
         p1.movableTmp = true;\r
         p2.movableTmp = true;\r
 \r

-        if (i == j || (Math.abs(getX(i) - getX(j)) == 1 && Math.abs(getY(i) - getY(j)) == 1))\r
+        if (i == j || (Math.abs(this.getX(i) - this.getX(j)) == 1 && Math.abs(this.getY(i) - this.getY(j)) == 1))\r

           continue;\r
 \r
         let dist = p1.position.distanceTo(p2.position);\r
         const collisionDistance = Math.min(this.width / this.numPointsWidth, this.height / this.numPointsHeight);\r
         if (dist < collisionDistance) {\r
           continue;\r
 \r
         let dist = p1.position.distanceTo(p2.position);\r
         const collisionDistance = Math.min(this.width / this.numPointsWidth, this.height / this.numPointsHeight);\r
         if (dist < collisionDistance) {\r

-          p1.movableTmp = false;\r
-          p2.movableTmp = false;\r
+          // p1.movableTmp = false;\r
+          // p2.movableTmp = false;\r

           let diff = p1.position.clone().sub(p2.position).normalize();\r
           diff.multiplyScalar((collisionDistance - dist) * 1.001 / 2);\r
           if (p1.movable)\r
           let diff = p1.position.clone().sub(p2.position).normalize();\r
           diff.multiplyScalar((collisionDistance - dist) * 1.001 / 2);\r
           if (p1.movable)\r


@@ -264,4 +264,6 @@ class Cloth {
   getVertexIndex(x, y) {\r
     return y * this.numPointsWidth + x;\r
   }\r
   getVertexIndex(x, y) {\r
     return y * this.numPointsWidth + x;\r
   }\r

+  getX(i) { return i % this.numPointsWidth; }\r
+  getY(i) { return Math.floor(i / this.numPointsWidth); }\r

 }
\ No newline at end of file
 }
\ No newline at end of file

diff --git a/Scripts/main.js b/Scripts/main.js
index 6fa9f22f226dd1d8b5b46e2678df0eb03e3ad74b..5e68a4f322020e8baea4bbd6ffdc44b94235f024 100644 (file)
--- a/Scripts/main.js
+++ b/Scripts/main.js
@@ -1,5 +1,4 @@
-//import {  } from './cloth.js';\r
-//import { OrbitControls } from './OrbitControls.js';\r
+\r

 \r
 function addLights(scene){\r
   scene.add( new THREE.AmbientLight( 0x222222 ) );\r
 \r
 function addLights(scene){\r
   scene.add( new THREE.AmbientLight( 0x222222 ) );\r


@@ -80,16 +79,17 @@ function init() {
   /** Setup scene */\r
   let [scene, camera, renderer] = setup_scene(canvasSpace);\r
   \r
   /** Setup scene */\r
   let [scene, camera, renderer] = setup_scene(canvasSpace);\r
   \r

-  //const loader = new THREE.TextureLoader();\r
+  const loader = new THREE.TextureLoader();\r

   //Red color: 0xC70039\r
 \r
   const cloth = new Cloth(1, 0.5, 20, 20);\r
   const clothGeometry = cloth.generateGeometry();\r
   //Red color: 0xC70039\r
 \r
   const cloth = new Cloth(1, 0.5, 20, 20);\r
   const clothGeometry = cloth.generateGeometry();\r

-  //const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/DeutschlandFlagge.jpg'), color: 0xffffff, side: THREE.DoubleSide, flatShading: false});\r
-  const clothMaterial = new THREE.MeshStandardMaterial({ color: 0xC70039, side: THREE.DoubleSide, flatShading: false });\r
+  const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/hsrm.jpg'), color: 0xffffff, side: THREE.DoubleSide, flatShading: false});\r
+  //const clothMaterial = new THREE.MeshStandardMaterial({ color: 0xC70039, side: THREE.DoubleSide, flatShading: false });\r

   const clothMesh = new THREE.Mesh(clothGeometry, clothMaterial);\r
   scene.add(clothMesh);\r
   \r
   const clothMesh = new THREE.Mesh(clothGeometry, clothMaterial);\r
   scene.add(clothMesh);\r
   \r

+  document.getElementById("windToggle").checked = options.wind;\r

   document.getElementById("windToggle").onchange = (e) => {\r
     options.wind = e.target.checked;\r
   };\r
   document.getElementById("windToggle").onchange = (e) => {\r
     options.wind = e.target.checked;\r
   };\r