Realistic Palms for three.js — GLB LOD Models

Palms in Realistic Style for three.js

Palms are the hardest vegetation to fake in WebGL: leaf cards with cutouts are heavy on overdraw, and a beach scene usually needs dozens of them. These five realistic palms — Coconut Palm, Date Palm, Canary Palm, Washingtonia and Fan Palm — ship as lightweight GLB that GLTFLoader from three/addons reads directly.

Each model carries LOD0–LOD3 with a pivot at the base and a separate collision mesh you can hand to Rapier or cannon-es. Bark and leaves use their own PBR materials, so masked leaf cards become material.alphaTest, write depth and cast shadows without sorting. Drop the LODs into THREE.LOD with lod.addLevel(mesh, distance), instance the low levels with InstancedMesh per chunk, and the scene runs on both WebGLRenderer and WebGPURenderer.

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.