Low Poly GLB Models for Three.js

Three.js is built around GLB, and a self contained GLB is the ideal asset to hand it. GLB packs geometry, materials and textures into a single binary file, so one fetch gives Three.js everything it needs with no separate texture requests to manage. You load it with GLTFLoader, which parses the file and hands back a gltf.scene object you can add directly to your Three.js scene. Because GLB is the official glTF runtime format and Three.js is the reference implementation of a glTF viewer, the import is reliable and the materials, node names and hierarchy come through exactly as authored.

Adding DRACOLoader to your GLTFLoader is the standard performance step for low poly GLB in Three.js. When a GLB is exported with Draco compression, the geometry is encoded so the file is dramatically smaller, and DRACOLoader decodes it at load time using a worker so the main thread stays responsive. The setup is a few lines: create a DRACOLoader, point it at the decoder path, and call gltfLoader.setDRACOLoader on your loader. For textures, add KTX2Loader so compressed textures stay compressed on the GPU. With Draco and KTX2 wired in, a low poly model loads fast and uses little memory, which is the whole point on the web.

Once loaded, a GLB becomes part of the Three.js scene graph, and understanding that structure is what lets you control the model. The gltf.scene is a Group, and inside it each mesh is a Mesh node with its own geometry, material and transform, nested to match the original hierarchy. You can traverse the scene with the traverse method to find meshes by name, swap materials, toggle visibility, or attach the model to another object so it follows along. Pivots and parent child relationships survive the round trip, so a low poly turret can rotate on its base and a character can carry an item, all addressable through the node tree.

Materials on a GLB import as MeshStandardMaterial by default, which is the physically based material Three.js uses for realistic lighting, and it works well for low poly too. The flat faces of a low poly mesh catch the standard material lighting cleanly, and you can dial metalness near zero and roughness high for a soft matte look, or assign MeshBasicMaterial for a fully flat unlit style that costs almost nothing to render. A single shared atlas of flat colors, 512 to 1024 pixels for props and up to 2048 for a hero, keeps the material count and draw calls low. Because the texture is solid colors, it compresses tightly and looks crisp at any zoom.

Performance in Three.js comes from drawing less and reusing more, and low poly assets plus instancing are a perfect match. When you need many copies of the same prop, an InstancedMesh draws them all in a single call instead of one call per object, which turns a forest of low poly trees into one cheap draw. Share one material and one geometry across instances, keep polycounts in the 1,000 to 10,000 triangle web range, and author LODs with the LOD object so distant models swap to simpler meshes. Combined with Draco compressed GLB and a shared atlas, a Three.js scene built from generated low poly models holds a smooth frame rate even on mobile.

For the simplest delivery, the model-viewer web component loads a GLB with one HTML tag and gives you orbit controls, AR and lazy loading for free, which is ideal for a product page or a quick embed. For full control you write Three.js directly with GLTFLoader and DRACOLoader as described. Either way the assets you generate are AI created and fully owned by you, safe for commercial sites and apps and free of attribution, so you can build a configurator, a game or a showcase entirely from self contained low poly GLB models with a clean, fast, royalty free pipeline.