Low-poly trees for three.js — GLB LOD models

Trees in Low-poly Style for three.js

Low-poly trees arrive as plain GLB: point GLTFLoader from three/addons at the file and the mesh already carries LOD0–LOD3. Add each level with lod.addLevel(mesh, distance) and THREE.LOD swaps by camera distance every frame. Flat shading and vertex colours replace textures, so one material covers Oak, Scots Pine, Spruce, Birch or Weeping Willow.

Leaves are solid geometry, so there is no alpha testing and no transparent overdraw on mobile GPUs. Feed the trees into InstancedMesh for thousands of copies per draw call, or BatchedMesh to mix species; group instances per LOD chunk yourself. The invisible collision mesh goes to Rapier or cannon-es. LOD0 stays within a few hundred to a couple of thousand triangles.

About the Low-poly style

Low-poly vegetation is the cheapest style to render and to ship.

Flat shading: one normal per face gives the crisp faceted look; no normal maps.
Colour lives in vertex colours (glTF COLOR_0), so there are no textures, no UV work and almost no video memory.
Leaves are solid geometry, not alpha cards: no alpha testing and no transparent overdraw, which matters on mobile GPUs.
One material can be shared by every model in the scene, so trees batch and instance easily.
Typical budgets range from a few hundred to a couple of thousand triangles at LOD0.

A good fit for mobile, WebGL/WebGPU, VR, strategy, city builders and stylised indie games. In the engine, use a material that multiplies by vertex colour.

Using it in three.js

In three.js, load GLB with GLTFLoader from three/addons; add DRACOLoader or KTX2Loader only if a file uses those extensions.

Distance LOD: THREE.LOD with lod.addLevel(mesh, distance) for LOD0–LOD3; it switches levels by camera distance every frame.
Forests: InstancedMesh draws thousands of copies in one draw call, and BatchedMesh mixes several tree variations. THREE.LOD does not apply per instance, so group instances by LOD per chunk yourself.
Leaves: glTF alphaMode MASK becomes material.alphaTest, and double-sided materials get side: THREE.DoubleSide automatically.
Collision mesh: keep it invisible and pass it to a physics library such as Rapier or cannon-es.