world-component/components/objects/Terrain.ts

import { PlaneGeometry, MeshLambertMaterial, Mesh, TextureLoader, Color } from "three";

class Terrain {
  constructor(props: { width: number; height: number; color: Color }) {
    const loader = new TextureLoader();
    const heightTexture = loader.load("img/textures/leafy-autumn-forest-floor.jpg");
    const geometry = new PlaneGeometry(props.width, props.height, 64, 64);
  
    const material = new MeshLambertMaterial({
      color: props.color,
      flatShading: true,
      map: heightTexture,
    });
  
    const plane = new Mesh(geometry, material);
    plane.position.set(0, 0, 0);
    plane.rotation.x -= Math.PI * 0.5;
  
    // Storing our original vertices position on a new attribute
    plane.geometry.attributes.position.originalPosition = plane.geometry.attributes.position.array;
  
    plane.tick = () => {};
  
    return plane;
  }
}

export { Terrain };