Realistic 3D models for three.js: GLB vegetation

Realistic 3D Models for three.js

Realistic GLB vegetation loads in three.js with GLTFLoader from three/addons; the PBR metal/roughness materials — bark with base colour, normal and roughness maps, leaves as masked leaf-cluster cards — render as authored, with no conversion step. Reach for DRACOLoader or KTX2Loader only if a file actually uses those extensions. Feed the LOD0–LOD3 meshes into THREE.LOD via lod.addLevel(mesh, distance) and level switching runs every frame by camera distance.

Of the 42 models, the Oak, Scots Pine, Spruce, Birch, Weeping Willow, Olive and Coconut Palm cover the widest range of scenes. Draw the mass with InstancedMesh; BatchedMesh mixes several species inside one chunk. THREE.LOD is not per instance, so group instances by level per chunk yourself. The invisible collision mesh goes to Rapier or cannon-es. Suits first- and third-person survival, open worlds and simulators; on mobile start at LOD1 or LOD2 and watch leaf overdraw.

About the Realistic style

Realistic models use the PBR metal/roughness workflow that glTF 2.0, Unity, Unreal, Godot and three.js read directly.

Bark: base colour, normal and roughness maps on the trunk and branches.
Leaves: alpha-tested (masked) cards with leaf-cluster textures, not alpha-blended, so they write depth, need no sorting and cast correct shadows.
Bark and leaves use separate materials, which keeps draw calls predictable and works well with GPU instancing.
LOD0 is the close-up mesh; LOD1–LOD3 drop branches and leaf cards, so the last level is light enough for far distances.

Best for first- and third-person games, survival, open worlds and simulators on PC and consoles. On mobile, start from LOD1 or LOD2 as the nearest level and watch overdraw from leaf cards.

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.