X-Git-Url: https://gitweb.ps.run/cloth_sim/blobdiff_plain/6b8872e162f44cb469a0dc4cdbb30981912a4ee3..f48718f397ffbc1eb006460c495cf260668bd545:/Scripts/main.js

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