adjust stats-world perspective & size & colors

project.yaml

@@ -34,7 +34,8 @@
 - .5 customize favicon
 - .5 make advanced features harder to access
 
-- Release Minimum Viable Product
+- Release Minimum Viable Product :
+  - Turn off stats-world or ensure it's usable (eg. cannot zoom out too far and lose world).
 
 - Connect with phone contacts
 

src/components/World/World.js

@@ -13,7 +13,7 @@ import { createRenderer } from "./systems/renderer.js";
 // from outside the module
 
 const color = "#42b883";
-const color2 = "#4eac82";
+const color2 = "#0055aa";
 
 let camera;
 let renderer;

src/components/World/components/camera.js

@@ -5,11 +5,11 @@ function createCamera() {
     35, // fov = Field Of View
     1, // aspect ratio (dummy value)
     0.1, // near clipping plane
-    100 // far clipping plane
+    300 // far clipping plane
   );
 
   // move the camera back so we can view the scene
-  camera.position.set(0, 10, 30);
+  camera.position.set(0, 100, 200);
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   camera.tick = () => {};
 

src/components/World/components/objects/terrain.js

@@ -8,15 +8,16 @@ import {
 
 export function createTerrain(props) {
   const loader = new TextureLoader();
-  const height = loader.load("img/textures/height.png");
+  const height = loader.load("img/textures/forest-floor.png");
   //                                        w    h
-  const geometry = new PlaneGeometry(150, 150, 64, 64);
+  const geometry = new PlaneGeometry(100, 100, 64, 64);
 
   const material = new MeshLambertMaterial({
     color: props.color,
     flatShading: true,
-    displacementMap: height,
+    map: height,
-    displacementScale: 5,
+    //displacementMap: height,
+    //displacementScale: 5,
   });
 
   const plane = new Mesh(geometry, material);

src/components/World/components/scene.js

@@ -4,7 +4,7 @@ function createScene(color) {
   const scene = new Scene();
 
   scene.background = new Color(color);
-  scene.fog = new Fog(color, 60, 90);
+  //scene.fog = new Fog(color, 60, 90);
   return scene;
 }