{"id":13658485,"url":"https://github.com/IceCreamYou/THREE.Terrain","last_synced_at":"2025-04-24T11:31:46.869Z","repository":{"id":16132300,"uuid":"18877591","full_name":"IceCreamYou/THREE.Terrain","owner":"IceCreamYou","description":"A procedural terrain generation engine for use with the Three.js 3D graphics library for the web.","archived":false,"fork":false,"pushed_at":"2024-08-05T07:49:43.000Z","size":4599,"stargazers_count":751,"open_issues_count":6,"forks_count":115,"subscribers_count":27,"default_branch":"gh-pages","last_synced_at":"2025-04-08T13:09:37.266Z","etag":null,"topics":["diamond-square-algorithm","generative","heightmap","javascript","materials","noise","procedural","procedural-generation","scene","terrain","threejs"],"latest_commit_sha":null,"homepage":"https://icecreamyou.github.io/THREE.Terrain/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IceCreamYou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":"roadmap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-04-17T12:31:49.000Z","updated_at":"2025-04-08T00:53:27.000Z","dependencies_parsed_at":"2024-08-05T09:06:15.816Z","dependency_job_id":"12af7ebd-11ed-4779-bb5b-6ed9e8de3cee","html_url":"https://github.com/IceCreamYou/THREE.Terrain","commit_stats":{"total_commits":131,"total_committers":9,"mean_commits":"14.555555555555555","dds":"0.22137404580152675","last_synced_commit":"7443ac8ac1697f8a4e315ca5fdd494984ddb200a"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IceCreamYou%2FTHREE.Terrain","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IceCreamYou%2FTHREE.Terrain/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IceCreamYou%2FTHREE.Terrain/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IceCreamYou%2FTHREE.Terrain/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IceCreamYou","download_url":"https://codeload.github.com/IceCreamYou/THREE.Terrain/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250618312,"owners_count":21460069,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["diamond-square-algorithm","generative","heightmap","javascript","materials","noise","procedural","procedural-generation","scene","terrain","threejs"],"created_at":"2024-08-02T05:00:59.963Z","updated_at":"2025-04-24T11:31:46.441Z","avatar_url":"https://github.com/IceCreamYou.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/three.terrain.js.svg)](https://www.npmjs.com/package/three.terrain.js)\n\n`THREE.Terrain` is a **procedural terrain generation engine** for use with the\n[Three.js](https://github.com/mrdoob/three.js) 3D graphics library for the web.\n\n#### [Try the demo](https://icecreamyou.github.io/THREE.Terrain/)!\n\n## Usage\n\nYou can download the script normally, install it with Bower (`bower install\nTHREE.Terrain`), or install it with npm (`npm install three.terrain.js`). To\ninclude it on a page client-side without a module loader:\n\n```html\n\u003c!-- from a direct download or git clone --\u003e\n\u003cscript src=\"build/THREE.Terrain.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- from Bower --\u003e\n\u003cscript src=\"bower_components/THREE.Terrain/build/THREE.Terrain.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- from npm --\u003e\n\u003cscript src=\"node_modules/three.terrain.js/build/THREE.Terrain.min.js\"\u003e\u003c/script\u003e\n```\n\nYou then have access to the `THREE.Terrain` object. (Make sure the `three.js`\nlibrary is loaded first.)\n\nThe latest releases of this project have been tested with three.js\n[r130](https://github.com/mrdoob/three.js/releases/tag/r130).\n\nFor compatibility with r160 and later, which require the use of ES Modules,\ncheck out [this fork](https://github.com/oliver408i/THREE.Terrain).\n\n### Procedurally Generate a Terrain\n\nIn your own script, generate a terrain and add it to your scene:\n\n```javascript\n// Generate a terrain\nvar xS = 63, yS = 63;\nterrainScene = THREE.Terrain({\n    easing: THREE.Terrain.Linear,\n    frequency: 2.5,\n    heightmap: THREE.Terrain.DiamondSquare,\n    material: new THREE.MeshBasicMaterial({color: 0x5566aa}),\n    maxHeight: 100,\n    minHeight: -100,\n    steps: 1,\n    xSegments: xS,\n    xSize: 1024,\n    ySegments: yS,\n    ySize: 1024,\n});\n// Assuming you already have your global scene, add the terrain to it\nscene.add(terrainScene);\n\n// Optional:\n// Get the geometry of the terrain across which you want to scatter meshes\nvar geo = terrainScene.children[0].geometry;\n// Add randomly distributed foliage\ndecoScene = THREE.Terrain.ScatterMeshes(geo, {\n    mesh: new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 12, 6)),\n    w: xS,\n    h: yS,\n    spread: 0.02,\n    randomness: Math.random,\n});\nterrainScene.add(decoScene);\n```\n\nAll parameters are optional and thoroughly documented in the\n[source code](https://github.com/IceCreamYou/THREE.Terrain/blob/gh-pages/build/THREE.Terrain.js).\nYou can play around with some of the parameters and see what happens in the\n[demo](https://icecreamyou.github.io/THREE.Terrain/).\n\nMethods for generating terrain procedurally that are available by default\ninclude Cosine, Diamond-Square (a better version of Midpoint Displacement),\nFault lines, Feature picking, Particle deposition, Perlin and Simplex noise,\nValue noise, Weierstrass functions, Worley noise (aka Cell or Voronoi noise),\nBrownian motion, arbitrary curves, and various combinations of those.\n\n### Exporting and Importing\n\nExport a terrain to a heightmap image:\n\n```javascript\n// Returns a canvas with the heightmap drawn on it.\n// Append to your document body to view; right click to save as a PNG image.\nvar canvas = THREE.Terrain.toHeightmap(\n    // terrainScene.children[0] is the most detailed version of the terrain mesh\n    terrainScene.children[0].geometry.attributes.position.array,\n    { xSegments: 63, ySegments: 63 }\n);\n```\n\nThe result will look something like this:\n\n![Heightmap](https://raw.githubusercontent.com/IceCreamYou/THREE.Terrain/gh-pages/demo/img/heightmap.png)\n\nIf all you need is a static terrain, the easiest way to generate a heightmap is\nto use the [demo](https://icecreamyou.github.io/THREE.Terrain/) and save the\ngenerated heightmap that appears in the upper-left corner. However, if you want\nto perform custom manipulations on the terrain first, you will need to export\nthe heightmap yourself.\n\nTo import a heightmap, create a terrain as explained above, but pass the loaded\nheightmap image (or a canvas containing a heightmap) to the `heightmap` option\nfor the `THREE.Terrain()` function (instead of passing a procedural generation\nfunction).\n\n### Dynamic Terrain Materials\n\nWhen generating terrains procedurally, it's useful to automatically texture\nterrains based on elevation/biome, slope, and location. A utility function is\nprovided that generates such a material (other than blending textures together,\nit is the same as a `MeshLambertMaterial`).\n\n```javascript\n// t1, t2, t3, and t4 must be textures, e.g. loaded using `THREE.TextureLoader.load()`.\n// The function takes an array specifying textures to blend together and how to do so.\n// The `levels` property indicates at what height to blend the texture in and out.\n// The `glsl` property allows specifying a GLSL expression for texture blending.\nvar material = THREE.Terrain.generateBlendedMaterial([\n    // The first texture is the base; other textures are blended in on top.\n    { texture: t1 },\n    // Start blending in at height -80; opaque between -35 and 20; blend out by 50\n    { texture: t2, levels: [-80, -35, 20, 50] },\n    { texture: t3, levels: [20, 50, 60, 85] },\n    // How quickly this texture is blended in depends on its x-position.\n    { texture: t4, glsl: '1.0 - smoothstep(65.0 + smoothstep(-256.0, 256.0, vPosition.x) * 10.0, 80.0, vPosition.z)' },\n    // Use this texture if the slope is between 27 and 45 degrees\n    { texture: t3, glsl: 'slope \u003e 0.7853981633974483 ? 0.2 : 1.0 - smoothstep(0.47123889803846897, 0.7853981633974483, slope) + 0.2' },\n]);\n```\n\n### More\n\nMany other utilities are provided, for example for compositing different\nterrain generation methods; creating islands, cliffs, canyons, and plateaus;\nmanually influencing the terrain's shape at different locations; different\nkinds of smoothing; and more. These features are all fully documented in the\n[source code](https://github.com/IceCreamYou/THREE.Terrain/blob/gh-pages/build/THREE.Terrain.js).\nAdditionally, you can create custom methods for generating terrain or affecting\nother processes.\n\nThere is also a\n[simulation](https://github.com/IceCreamYou/THREE.Terrain/tree/gh-pages/statistics)\nincluded that calculates statistics about each major procedural terrain\ngeneration method included in the `THREE.Terrain` library.\n\n## Screenshots\n\n![Screenshot 1](https://raw.githubusercontent.com/IceCreamYou/THREE.Terrain/gh-pages/demo/img/screenshot1.jpg)\n![Screenshot 2](https://raw.githubusercontent.com/IceCreamYou/THREE.Terrain/gh-pages/demo/img/screenshot2.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIceCreamYou%2FTHREE.Terrain","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIceCreamYou%2FTHREE.Terrain","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIceCreamYou%2FTHREE.Terrain/lists"}