3D Terrain Generator Using Three.js: Create A Procedural Landscape And Some Grass!
THREE.Terrain is a procedural terrain generator for Three.js that lets you easily create 3D landscapes with mountains, valleys, and blowing grass. With just a few lines of code, you can have your agent generating a complete 3D outdoor scene with procedural mountains, elevational textures, and thousands of instances of animated blowing grass.
When creating 3D environments with agents, things go smoothly until you want something beyond flat planes and solid colors. When asked to generate some sort of terrain, like a hilly or grassy area, your agent will get creative — probably by not knowing which library to use.
Recently I stumbled upon the THREE.Terrain library, which is a procedural terrain generator for the web using Three.js. What really caught my eye was the inclusion of a SKILL.md file in their repo. This file is intended for AI agents to teach them how to use the library. In fact, the creator expected AI agents to use this library.
Source
IceCreamYou/THREE.Terrain
★ 890JavaScript
THREE.Terrain provides everything you need to create a complete 3D outdoor scene. Choose from several different algorithms including Diamond-Square, which creates mountainous terrains; Perlin and Simplex, which give smoother terrains; and Worley (Voronoi) noise, which creates more exotic crystalline terrains. Add in elevational textures, place objects, and create thousands of instances of blowing grass that react to the wind. You can even provide a seed value to ensure deterministic results and always get the same terrain when reloading.
How to add terrain to your Three.js project
Make sure you have Three.js version r160 or higher installed. Then simply run the following command to install THREE.Terrain:
npm install three.terrain.js
Once installed, create a mesh for the terrain and add it to your scene. All the parameters are optional, but the defaults should give you something to start with.
Adding grass and wind animation
Thousands of instances of blowing grass can really bring a 3D outdoor scene to life. THREE.Terrain supports instancing thousands of instances of blowing grass while providing level of detail capabilities to compress distant grass and maintain a steady frame rate. You can control the density of the grass, the color range, the height of the blades, and how closely the blades cluster together. Wind animation is also performed during the rendering loop.
Exporting and importing heightmaps
The THREE.Terrain library allows you to export any terrain to a grayscale heightmap PNG image by appending the canvas element to your page and right-clicking to save. You can also import a PNG heightmap image (perhaps one you painted yourself or created with another tool) into the library and use it as the basis for a terrain mesh. This two way street can help you blend procedural and manual methods.
What to tell your agent
If you want the simplest solution, mention the name of the library and direct your agent to the SKILL.md file in the repo. The creator of this library specifically wrote this file to teach AI agents how to use the library. Before doing this, open the interactive demo located at icecreamyou.github.io/THREE.Terrain to give your agent a better idea of the type of terrain you are looking for.
"Add THREE.Terrain to my Three.js project (r160+). Generate rolling hilly terrain using DiamondSquare with maxHeight 80, seed 12345 for repeatable output. Scatter instanced grass across the surface with wind animation — I want it to look like an open field." "My Three.js scene has a camera flying over land. Use THREE.Terrain with a PerlinDiamond heightmap, blend a sandy texture at low elevations and a green grass texture above height 10, then scatter a few tree placeholders using ScatterMeshes."
A complete outdoor terrain generator — procedural mountains and valleys, elevation-based texture blending, animated instanced grass, and heightmap import/export — all from one npm package. The author added a SKILL.md specifically so AI agents can use this without hand-holding. Open the demo first, pick the look you want, then pass the library name to your agent and describe the scene.
Source: github.com
Free course
Stop reading about AI — start building with it
The free Claude Code course: your first site, tool or game — no coding. No upsells, no cross-sells — nothing to buy here.
Start free →
Author
Evgenii Arsentev
PhD · Chief Executive Officer, digital health
Articles · Latest articles