DRACOLoader in Three.js — Compressed glTF Meshes
DRACOLoader unpacks Draco-compressed glTF meshes 50-80% smaller than uncompressed — essential for production 3D web.
DRACOLoader is a Three.js loader that decodes Draco-compressed mesh data inside glTF files. Draco is Google's open mesh compression library that achieves 50-80% size reduction on typical 3D models with minimal quality loss. Setup: import DRACOLoader, attach to your GLTFLoader instance, host the Draco decoder WASM (~150KB) on your CDN. The decoder runs once per page load, decoding subsequent meshes is fast. For a portfolio site with 5 glTF models totaling 8MB uncompressed, Draco brings the bundle down to 1.5-2MB. I run Draco on every production glTF, almost always — the decode cost is negligible compared to download time savings.
When this is overkill
If the goal is a simple e-commerce listing or content blog, a full dracoloader three js setup is overkill — a CSS-driven hero plus static images does the job with far less work. dracoloader three js earns its keep when the brand needs a memorable visual moment or when 3D actually clarifies the product (configurators, tours, demos).
What you get hands-off
After delivery: the complete source handed over, commented code, and the asset pipeline documented. Hosting, SSL, nightly backups and maintenance can be part of the written offer if you need them.
What this delivers
Concrete output: a working dracoloader three js integration on a real production site, not a demo. The integration includes device-tier detection so weak phones get a lighter version automatically. Source files are handed over in their original formats — Blender, GLSL, glTF — so any future developer can continue where I stopped.
How I work with it
On a typical project, dracoloader three js ships as a self-contained module: one entry-point JS file, one CSS file, asset bundle below 1.5MB total. I keep the integration sandboxed so the rest of the site stays SEO-friendly classical HTML. Frame budget targets 60 FPS on a mid-range Android, with a measurable fallback below.
Frequently asked questions
Why pick this technology over alternatives?
What if a newer tool comes out next year?
How long does this take?
What does it cost?
What if my visitors are on weak phones?
Ready to ship a 3D experience?
Tell me what you need — clear written scope, no surprises.