world-component/components/objects/Terrain.ts

/**
 * Terrain Object Component
 * 
 * Creates textured terrain planes for the 3D world visualization.
 * Provides terrain generation with texture mapping and configurable
 * dimensions and colors.
 * 
 * @file Terrain.ts
 * @author Matthew Raymer
 * @created 2023-06-30
 * @version 1.0.0
 */

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

/**
 * Terrain class for creating textured terrain planes.
 * 
 * This class generates terrain using Three.js PlaneGeometry with
 * texture mapping. It creates a flat terrain surface that can be
 * used as a base for the 3D world. The terrain includes texture
 * loading and proper material setup.
 * 
 * @class Terrain
 * @author Matthew Raymer
 */
class Terrain {
  /**
   * Creates a new Terrain instance with the specified properties.
   * 
   * @param props - Configuration object for terrain properties
   * @param props.width - The width of the terrain plane
   * @param props.height - The height of the terrain plane
   * @param props.color - The base color of the terrain material
   * 
   * @returns A Three.js Mesh object representing the terrain
   * 
   * @example
   * ```typescript
   * const terrain = new Terrain({
   *   width: 100,
   *   height: 100,
   *   color: new Color(0x8B4513) // Brown color
   * });
   * scene.add(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; // Rotate to lay flat
  
    // Storing our original vertices position on a new attribute
    plane.geometry.attributes.position.originalPosition = 
      plane.geometry.attributes.position.array;
  
    // Add tick method for animation compatibility
    plane.tick = () => {};
  
    return plane;
  }
}

export { Terrain };