What problem does it solve?
Hero backdrops and product stages often look like subjects floating on a flat gradient because building convincing real-time terrain, vegetation, sky, and lighting in Three.js involves many subtle pitfalls: wasted triangles, texture seams, invisible stars, and jarring lighting cuts. This Skill provides a proven recipe for a live procedural landscape that grounds a subject in a believable place.
Core Features & Use Cases
- Polar-grid heightfield terrain: Sample a domain-warped noise heightfield on a polar grid centred under the camera so resolution follows the lens, with vertex colours computed from slope and moisture instead of textures.
- GPU-instanced grass and stones: Render 100k+ grass blades as a single InstancedMesh shaped entirely in the vertex shader, plus scattered stones from the same height function, keeping wind animation off the CPU.
- Gradient sky, stars, and time-of-day system: Paint a six-stop sky gradient on a tiny canvas, confine a star field to the visible elevation band, and cross-fade full lighting states between morning, noon, sunset, and night.
- Use Case: Build a landing page hero where a product or building sits in a grassy plain, letting users orbit the scene and switch times of day with smooth transitions.
Quick Start
Use the threejs-landscape skill to build a standalone HTML page with procedural terrain, instanced grass, a gradient sky, and cross-fading times of day behind my subject.
