world

World Scale & Distance

A world feels small for three fixable reasons: it is physically small, it ends at a visible edge, or there is nothing in the distance. A "big map" means hundreds of meters with something on every horizon — not a 150m patch with empty space past it.

Size to the experience

Pick the world size from how the player moves. A third-person shooter map you sprint across for a minute is roughly 300–1000m wide, not ~150m. Place points of interest far enough apart that traveling between them takes real seconds.

Shape the ground

Outdoor ground is almost never flat — a flat plane is the clearest "unfinished prototype" tell after untextured gray. Give the terrain real shape: displace a subdivided plane's vertices with layered noise for hills, slopes, and valleys, or drive it from a heightmap. The noise must be coherent — Math.random() per vertex gives spiky static, not hills. Three.js ships no noise function, so add the simplex-noise package and sum a few octaves (each octave halving amplitude and doubling frequency) so large hills carry small undulations. Carve in readable landmarks — a ridge, a basin, some high ground — so the space has tactical variety, then call geometry.computeVertexNormals() so lighting follows the shape. Keep collision and the navmesh aligned to the shaped terrain, not a separate flat floor underneath.

The terrain is a surface like any other — it needs a real material, not a solid color (see the materials skill). Apply a tiled ground texture, and for a large map blend it by slope and height (grass on flat ground, rock/cliff on steep slopes, sand at the shoreline) so the whole map doesn't read as one flat green sheet.

Give the world distance

The eye reads scale from depth cues — provide all three so the world has a horizon instead of an edge:

• Horizon: a skybox / environment background or a distant terrain silhouette, so the ground never ends at a hard line.
• Fog: scene.fog = new Fog(skyColor, near, far), tuned so far geometry fades into the sky. This adds depth and hides the draw-distance edge. Match the fog color to the sky color.
• Distant detail: large background landforms, ridgelines, or structures the player can see but may never reach.

Set the camera far plane past the fog's far distance so nothing pops in, and keep near reasonable (e.g. 0.1) for depth precision.

Fill it without tanking the framerate

Density is what makes a world believable; an empty ground between a handful of props reads as a prototype. Scatter dense detail — grass tufts, rocks, bushes, debris — across the terrain, and cluster props into places (an outpost, a copse of trees) rather than dotting them evenly. Naive copies kill the framerate, so use InstancedMesh for the repeated detail.

A loaded prop is rarely a single mesh: glTF represents one model as a hierarchy, and a part with several materials (a tree's trunk and foliage, a rock's stone and moss) arrives as a group of separate meshes, one per primitive. InstancedMesh instances one geometry+material pair, so grabbing the first mesh you find and instancing it silently drops every other primitive — you scatter bare trunks instead of trees. Instance each primitive in its own InstancedMesh sharing the same per-instance transforms, or merge the model's primitives into one geometry first. Note THREE.LOD swaps whole objects by distance and does not operate per-instance, so for distant instanced detail cull by distance yourself (skip far instances, or keep separate near/far instance pools) rather than wrapping instances in LOD.

Keep scale consistent

Author everything in meters against the character's height (~1.8m). A tree the size of the player, or a crate the size of a house, breaks the sense of place faster than anything else.

Finish the image

A raw render of correct geometry still looks flat. A light postprocessing pass — subtle bloom, ambient occlusion to ground objects, and gentle color grading (see the postprocessing skill) — is often what separates "a polished game" from "a tech demo". Add it once the scene reads correctly, not before.