commentsrefactoring

1 files changed, 13 insertions, 3 deletions

diff --git a/Scripts/main.js b/Scripts/main.js
index 51d6762..1a30f7a 100644
--- a/Scripts/main.js
+++ b/Scripts/main.js
@@ -82,13 +82,15 @@ function init() {
   const loader = new THREE.TextureLoader();

   //Red color: 0xC70039

 

+  /** Create cloth and generate mesh */

   const cloth = new Cloth(1, 0.5, 20, 20);

   const clothGeometry = cloth.generateGeometry();

-  const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/hsrm2.png'), color: {type: "c", value: new THREE.Color(0xffffff)}, side: THREE.DoubleSide, flatShading: false, transparent: true });

+  const clothMaterial = new THREE.MeshStandardMaterial({ map: loader.load('Textures/hsrm2.png'), 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);

   

+  /** Register wind checkbox */

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

   document.getElementById("windToggle").onchange = (e) => {

     options.wind = e.target.checked;

@@ -104,25 +106,31 @@ function init() {
    * @param {number} dt - time passed since last frame in ms

    */

   function animate(dt) {

+    /** run simulation step */

     cloth.simulate(dt / 1000);

 

     cloth.updateGeometry(clothGeometry);

-    

-    raycaster.setFromCamera(new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera);

 

+    /** raycast from camera to cursor */

+    raycaster.setFromCamera(new THREE.Vector2((mousePos.x / w) * 2 - 1, ((h - mousePos.y) / h) * 2 - 1), camera);

     intersects = raycaster.intersectObject(clothMesh);

 

+    /** provide user interaction */

     if (intersects.length > 0) {

       if (windKeyDown)

         cloth.blow(camera.position, intersects);

+      /** "grab" vertex index */

       if (dragKeyDown && draggedIndex == -1)

         draggedIndex = intersects[0].face.a;

     }

     if (dragKeyDown && draggedIndex != -1)

       cloth.drag(calculateMousePosToWorld(mousePos), draggedIndex);

+

+    /** queue next frame */

     setTimeout(() => {

       animate(frameTime);

     }, frameTime);

+

     renderer.render(scene, camera);

   }

 

@@ -163,6 +171,7 @@ function init() {
     evt.preventDefault();

   }, false);

 

+  /** register key events */

   document.onkeydown = (evt) => {

     if (evt.code === "KeyW")

       windKeyDown = true;

@@ -179,6 +188,7 @@ function init() {
     }

   };

 

+  /** helper function to turn mouse position into 3D coordinates */

   function calculateMousePosToWorld(mousePos){

     var vec = new THREE.Vector3(); // create once and reuse

     var pos = new THREE.Vector3(); // create once and reuse