world-environment

World Environment Assembly

Use this skill when building an outdoor 3D scene from modular terrain, weather, labels, props, spawn points, and environmental update systems.

Architecture

Put scene assembly in a game/scenes/ module. Keep React components responsible for mounting the canvas and lifecycle, but keep terrain, prop creation, lighting, weather, and per-frame environment updates in plain TypeScript functions.

A useful structure is:

• data tables describe locations, scene variants, item metadata, and spawn profiles
• environment modules create lighting, sky, weather, and terrain helpers
• controller modules update player movement
• NPC modules update autonomous characters
• UI modules render overlays and panels
• a bridge context shares only cross-boundary state such as scene focus or pause handlers

export interface SceneProfile {
  key: string
  biome: 'forest' | 'coast' | 'city' | 'mountain'
  terrainStyle: string
  spawnTags: string[]
  riskDelta: number
}

export interface EnvironmentSystems {
  lighting: LightingRig
  weather: WeatherSystem
  terrainHeight: (x: number, z: number) => number
}

Terrain

For compact worlds, start with a subdivided ground mesh and reshape vertices from a deterministic height function. Recompute normals after editing positions. Keep a matching terrainHeight(x, z) function for player grounding, NPC grounding, camera clamps, and spawn adjustment.

import { MeshBuilder, VertexBuffer, VertexData, type Scene } from '@babylonjs/core'

export function terrainHeightForBiome(biome: string, x: number, z: number) {
  if (biome === 'mountain') return Math.max(0, 0.04 * x + Math.sin(z * 0.35) * 0.4)
  if (biome === 'coast') return Math.sin(x * 0.18) * 0.08
  return Math.sin(x * 0.2) * Math.cos(z * 0.2) * 0.12
}

export function buildGround(scene: Scene, biome: string, halfSize: number) {
  const ground = MeshBuilder.CreateGround('ground', { width: halfSize * 2, height: halfSize * 2, subdivisions: 64, updatable: true }, scene)
  const positions = ground.getVerticesData(VertexBuffer.PositionKind) ?? []
  const indices = ground.getIndices() ?? []
  const normals: number[] = []

  for (let index = 0; index < positions.length; index += 3) {
    positions[index + 1] = terrainHeightForBiome(biome, positions[index], positions[index + 2])
  }

  VertexData.ComputeNormals(positions, indices, normals)
  ground.updateVerticesData(VertexBuffer.PositionKind, positions)
  ground.updateVerticesData(VertexBuffer.NormalKind, normals)
  return ground
}