@anhldh/gltf-lod-loader

Progressive loading and Level of Detail (LOD) management for glTF/GLB models in three.js. Loads a lightweight version of a model first, then progressively swaps in higher-detail meshes and textures as needed.

Features

• Progressive glTF loading via a custom GLTFLoader plugin
• Automatic LOD management driven by camera distance / screen coverage
• Works with vanilla three.js and react-three-fiber (@react-three/drei)
• Ships TypeScript types

Installation

# npm
npm install @anhldh/gltf-lod-loader three

# yarn
yarn add @anhldh/gltf-lod-loader three

# pnpm
pnpm add @anhldh/gltf-lod-loader three

# bun
bun add @anhldh/gltf-lod-loader three

three is a peer dependency.

Usage

Vanilla three.js

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { gltfLodLoader } from "@anhldh/gltf-lod-loader";

const loader = new GLTFLoader();

// Enables progressive loading + LOD management on this loader/renderer.
gltfLodLoader(loader, renderer);

loader.load("https://yourdomain.com/model.glb", (gltf) => {
  scene.add(gltf.scene);
});

react-three-fiber + drei

import { useGLTF } from "@react-three/drei";
import { useThree } from "@react-three/fiber";
import { gltfLodLoader } from "@anhldh/gltf-lod-loader";

function Model({ src }: { src: string }) {
  const gl = useThree((s) => s.gl);

  const { scene } = useGLTF(src, false, false, (loader) => {
    gltfLodLoader(loader as any, gl as any, {});
  });

  return <primitive object={scene} />;
}

API

gltfLodLoader(loader, renderer, opts?)

Enables progressive loading and registers the LOD manager for the given loader and renderer. Returns the LODsManager instance.

| Param | Type | Description | | ------------------------ | ------------------- | ------------------------------------------------- | | loader | GLTFLoader | The glTF loader to augment. | | renderer | WebGLRenderer | The renderer the models will be drawn with. | | opts.enableLODsManager | boolean | Auto-enable the LOD manager. Defaults to true. | | opts.hints | SmartLoadingHints | Hints to request assets optimized for a use case. |

License

MIT