orbit/background, flag, wind control

diff --git a/Scripts/cloth.js b/Scripts/cloth.js
index 0708d5e0c07b5f0112e6d770fd82079d9991b490..546f7d34ff05b7a561cee2a6fda279087ae63240 100644 (file)
--- a/Scripts/cloth.js
+++ b/Scripts/cloth.js
@@ -103,6 +103,8 @@ export class Cloth {
   externalForces = [];\r
   windForce = 50;\r
 \r
+  windFactor = new THREE.Vector3(0, 0, 0);\r
+\r
   /**\r
    * creates a rectangular piece of cloth\r
    * takes the size of the cloth\r
@@ -117,6 +119,8 @@ export class Cloth {
     let vertices = [];\r
     let faces = [];\r
 \r
+    this.width = width;\r
+    this.height = height;\r
     this.numPointsWidth = numPointsWidth;\r
     this.numPointsHeight = numPointsHeight;\r
 \r
@@ -135,7 +139,7 @@ export class Cloth {
     for (let y = 0; y < numPointsHeight; y++) {\r
       for (let x = 0; x < numPointsWidth; x++) {\r
         vertices.push(\r
-          new THREE.Vector3((x - (numPointsWidth/2)) * stepWidth, height - y * stepHeight, 0)\r
+          new THREE.Vector3((x - ((numPointsWidth-1)/2)) * stepWidth, height - (y + ((numPointsHeight-1)/2)) * stepHeight, 0)\r
         );\r
       }\r
     }\r
@@ -184,10 +188,8 @@ export class Cloth {
     /**\r
      * hand cloth from left and right upper corners\r
      */\r
-    //this.vertexRigidness[0] = true;\r
-    //this.vertexRigidness[numPointsWidth * (numPointsHeight - 1)] = true;\r
-    this.fixedPoints.push(getVertexIndex(8, 10));\r
-    this.fixedPoints.push(getVertexIndex(12, 9));\r
+    this.fixedPoints.push(getVertexIndex(0, 0));\r
+    this.fixedPoints.push(getVertexIndex(0, 19));\r
   }\r
 \r
   /**\r
@@ -244,6 +246,8 @@ export class Cloth {
       yLength = vectorLength(this.geometry.vertices[face.c], this.geometry.vertices[face.d]);\r
       weight += xLength * yLength / 2;\r
 \r
+      weight *= 10;\r
+\r
       /**\r
        * split weight equally between four surrounding vertices\r
        */\r
@@ -382,14 +386,15 @@ checkIntersect() {
       let posI = this.geometry.vertices[i];\r
       let posJ = this.geometry.vertices[j];\r
       let dist = posI.distanceTo(posJ);\r
-      const collisionDistance = 0.5;\r
+      const collisionDistance = Math.min(this.width / this.numPointsWidth, this.height / this.numPointsHeight);\r
       if (dist < collisionDistance) {\r
         this.vertexRigidness[i] = true;\r
         this.vertexRigidness[j] = true;\r
         let diff = this.geometry.vertices[i].clone().sub(this.geometry.vertices[j]).normalize().multiplyScalar((collisionDistance - dist) * 1.001 / 2);\r
-        this.geometry.vertices[i].add(diff);\r
-        this.geometry.vertices[j].sub(diff);\r
-        console.log(this.geometry.vertices[i].distanceTo(this.geometry.vertices[j]));\r
+        if (!(this.fixedPoints.includes(i) || this.fixedPoints.includes(j))) {\r
+          this.geometry.vertices[i].add(diff);\r
+          this.geometry.vertices[j].sub(diff);\r
+        }\r
       }\r
     }\r
   }\r
@@ -414,14 +419,15 @@ getAcceleration(vertexIndex, dt) {
   // constant gravity\r
   let g = new THREE.Vector3(0, -9.8, 0);\r
   // stiffness\r
-  let k = 500;\r
+  let k = 1000;\r
 \r
   // Wind vector\r
   let fWind = new THREE.Vector3(\r
-    Math.sin(vertex.x * vertex.y * this.time),\r
-    Math.cos(vertex.z * this.time),\r
-    Math.sin(Math.cos(5 * vertex.x * vertex.y * vertex.z))\r
+    this.windFactor.x * (Math.sin(vertex.x * vertex.y * this.time)+1),\r
+    this.windFactor.y * Math.cos(vertex.z * this.time),\r
+    this.windFactor.z * Math.sin(Math.cos(5 * vertex.x * vertex.y * vertex.z))\r
   );\r
+  //console.log(fWind);\r
 \r
   /**\r
    * constant determined by the properties of the surrounding fluids (air)\r
@@ -551,7 +557,7 @@ verlet(currentPosition, previousPosition, acceleration, passedTime) {
   // next position = 2 * current Position - previous position + acceleration * (passed time)^2\r
   // acceleration (dv/dt) = F(net)\r
   // Dependency for one vertex: gravity, fluids/air, springs\r
-  const DRAG = 0.96;\r
+  const DRAG = 0.97;\r
   let nextPosition = new THREE.Vector3(\r
     (currentPosition.x - previousPosition.x) * DRAG + currentPosition.x + acceleration.x * (passedTime * passedTime),\r
     (currentPosition.y - previousPosition.y) * DRAG + currentPosition.y + acceleration.y * (passedTime * passedTime),\r

diff --git a/Scripts/main.js b/Scripts/main.js
index 588e8f1160c0632a4d61daee836ecbb0c12bc562..fc797c872ed2503a9808e8a86df0bfa5411e5dab 100644 (file)
--- a/Scripts/main.js
+++ b/Scripts/main.js
@@ -1,4 +1,5 @@
 import { Face, Spring, Cloth } from './cloth.js';\r
+import { OrbitControls } from './OrbitControls.js';\r
 \r
 function addLights(scene){\r
   \r
@@ -27,16 +28,38 @@ function setup_scene(canvasSpace) {
   const renderer = new THREE.WebGLRenderer();\r
   /** size canvas to leave some space for UI */\r
   renderer.setSize(window.innerWidth, window.innerHeight - canvasSpace);\r
+  renderer.antialias = true;\r
   /** embed canvas in HTML */\r
   document.getElementById("threejscontainer").appendChild(renderer.domElement);\r
 \r
+  /** add orbit controls */\r
+  const controls = new OrbitControls(camera, renderer.domElement);\r
+  controls.target.set(0, 0, 0);\r
+  controls.update();\r
+\r
+  /** add scene background */\r
+  const loader = new THREE.TextureLoader();\r
+  const texture = loader.load(\r
+    'Textures/tears_of_steel_bridge_2k.jpg',\r
+    () => {\r
+      const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);\r
+      rt.fromEquirectangularTexture(renderer, texture);\r
+      scene.background = rt;\r
+    });\r
+\r
+  /** add flag pole */\r
+  const geometry = new THREE.CylinderGeometry( 0.02, 0.02, 5, 32 );\r
+  const material = new THREE.MeshStandardMaterial( {color: 0xffffff} );\r
+  const cylinder = new THREE.Mesh( geometry, material );\r
+  cylinder.position.set(-0.5, -2.25, 0);\r
+  scene.add( cylinder );\r
+\r
   /** add global light */\r
   const directionalLight = new THREE.DirectionalLight(0xffffff, 1);\r
   scene.add(directionalLight);\r
 \r
   /** position camera */\r
-  camera.position.y = 3;\r
-  camera.position.z = 10;\r
+  camera.position.z = 2;\r
   addLights(scene);\r
   return [scene, camera, renderer];\r
 }\r
@@ -62,7 +85,13 @@ function init() {
   \r
   /** setup cloth and generate debug mesh */\r
   let cloth = new Cloth();\r
-  cloth.createBasic(10, 10, 20, 20);\r
+  cloth.createBasic(1, 0.5, 20, 20);\r
+  document.getElementById("windToggle").onchange = (e) => {\r
+    if (e.target.checked)\r
+      cloth.windFactor.set(0.5, 0.2, 0.2);\r
+    else\r
+      cloth.windFactor.set(0, 0, 0);\r
+  };\r
   //cloth.createDebugMesh(scene);\r
 \r
 \r

diff --git a/index.html b/index.html
index 8f0eeb198da47639a47f8ba3334294dbe5048137..7abe428bd866f063d6db2b693b21fae95276c6f8 100644 (file)
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
                }\r
        </style>\r
        <script src="./Scripts/three.js"></script>\r
+       <script type="module" src="./Scripts/OrbitControls.js"></script>\r
        <script type="module" src="./Scripts/main.js"></script>\r
        </script>\r
 </head>\r
@@ -17,6 +18,7 @@
 <body>\r
        <div id="threejscontainer"></div>\r
        <div id="Output"></div>\r
+       <input type="checkbox" id="windToggle" checked="true">Wind</input>\r
 </body>\r
 \r
 </html>
\ No newline at end of file