on stats-world: adjust some lighting and position, and add an attempt at a screen-capture

src/components/World/World.js

@@ -47,7 +47,7 @@ class World {
     this.lights = [];
     this.bushes = [];
 
-    // Initializae Loop
+    // Initialize Loop
     this.loop = new Loop(this.camera, this.scene, this.renderer);
 
     container.append(this.renderer.domElement);

src/components/World/components/camera.js

@@ -5,7 +5,7 @@ function createCamera() {
     35, // fov = Field Of View
     1, // aspect ratio (dummy value)
     0.1, // near clipping plane
-    300 // far clipping plane
+    350 // far clipping plane
   );
 
   // move the camera back so we can view the scene

src/components/World/components/lights.js

@@ -3,7 +3,7 @@ import { DirectionalLight, DirectionalLightHelper } from "three";
 function createLights(color) {
   const light = new DirectionalLight(color, 4);
   const lightHelper = new DirectionalLightHelper(light, 0);
-  light.position.set(60, 60, 30);
+  light.position.set(60, 100, 30);
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   light.tick = () => {};

src/components/World/systems/controls.js

@@ -26,6 +26,8 @@ function createControls(camera, canvas) {
   controls.enableDamping = true;
 
   //controls.enableZoom = false;
+  controls.maxDistance = 250;
+
   //controls.enablePan = false;
 
   controls.tick = () => controls.update();