orbit/background, flag, wind control

1 files changed, 32 insertions, 3 deletions

diff --git a/Scripts/main.js b/Scripts/main.js
index 588e8f1..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 = 3;

-  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, 20, 20);

+  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);