/** * 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 };