Three.js Landscape Backdrop
Build a live 3D landscape backdrop with terrain, grass, stones, sky and stars using Three.js
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 4 files
What it does
When installed, the agent gains detailed guidance for building a 3D landscape scene in Three.js, the web graphics library, meant to sit behind a subject such as a building or product. It explains how to build terrain on a polar grid, layer noise for natural-looking hills, colour ground by slope and moisture, render GPU-animated grass and stones, paint a gradient sky, and add a star field. The agent can then write this code for a web page rather than relying on generic advice.
Great for
- Front-end developers building hero sections, product stages or scroll-driven web scenes in Three.js
- Designers who want a realistic 3D backdrop for a web page and are working with a developer or an agent
- Anyone asking an AI agent to create an outdoor 3D environment for a website
Skip it if
- People who do not write or run web code, since the output is JavaScript for a browser (the skill is a guide, not a finished app)
- Projects that do not use Three.js, since the code and advice are specific to that library
- Very low-powered devices or performance-critical pages, because thousands of grass blades and stars can be heavy without tuning
Try asking
- “Build a Three.js hero backdrop of rolling hills with grass and a gradient sky behind a product model”
- “Create a scroll-driven 3D landscape where a building sits on terrain instead of floating”
- “Add a time-of-day system to my Three.js landscape that fades between dusk and night”
- “Generate a star field for my Three.js sky that is visible within the camera's view”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 4 original files, the MIT licence and an attribution note.
threejs-landscape.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip threejs-landscape.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip threejs-landscape.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Name the subject and camera setup up front (lens, height, scroll behaviour) so the agent can size the polar grid and fog correctly
- Ask the agent to check the triangle winding by orbiting under the horizon, as the skill recommends, before adding detail
- Keep the demo folder as a reference: the included demo index.html and PROMPT.md show a working example to compare against
What's inside
- agents/openai.yaml
- demo/index.html
- demo/PROMPT.md
- SKILL.md
Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.