Skip to content
Get packs

Three.js Landscape Backdrop

Build a live 3D landscape backdrop with terrain, grass, stones, sky and stars using Three.js

Source Download skill
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”
Step-by-step guide: how to use Three.js Landscape BackdropInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    threejs-landscape.zip
  2. 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. 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.