Browse Source

adjust stats-world perspective & size & colors

kb/add-usage-guide
Trent Larson 2 years ago
parent
commit
9b1c51ba15
  1. 3
      project.yaml
  2. BIN
      public/img/textures/forest-floor.png
  3. BIN
      public/img/textures/height.png
  4. 2
      src/components/World/World.js
  5. 4
      src/components/World/components/camera.js
  6. 9
      src/components/World/components/objects/terrain.js
  7. 2
      src/components/World/components/scene.js

3
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

BIN
public/img/textures/forest-floor.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 MiB

BIN
public/img/textures/height.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 735 KiB

2
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;

4
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 = () => {};

9
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,
displacementScale: 5,
map: height,
//displacementMap: height,
//displacementScale: 5,
});
const plane = new Mesh(geometry, material);

2
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;
}

Loading…
Cancel
Save