@needle-tools/gltf-progressive
Advanced tools
three.js support for loading glTF or GLB files that contain progressive loading data
Blazingly fast loading for glTF, GLB or VRM files + smart density based LOD selection for meshes or texture for any three.js based project.
npm i @needle-tools/gltf-progressive
import { useNeedleProgressive } from "@needle-tools/gltf-progressive";
// Before loading with GLTFLoader
// call 'useNeedleProgressive' once to register the loader plugin
useNeedleProgressive(gltf_loader, webgl_renderer)
Examples are in the /examples directory. Live versions can be found in the links below.
Interactive Examples:
gltf-progressive works with any three.js project and should also work with any three.js version.
Full three.js example at: examples/threejs
const gltfLoader = new GLTFLoader();
const url = "https://cloud.needle.tools/-/assets/Z23hmXBZN45qJ-ZN45qJ-world/file";
// register the progressive loader plugin
useNeedleProgressive(gltfLoader, renderer)
// just call the load method as usual
gltfLoader.load(url, gltf => {
scene.add(gltf.scene)
})
<head>
<!-- Add the threejs import map to your HTML head section -->
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
"three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
"@needle-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"
}
}
</script>
</head>
Full react-three-fiber example at: examples/react-three-fiber
function MyModel() {
const { gl } = useThree()
const url = 'https://cloud.needle.tools/-/assets/Z23hmXBZN45qJ-ZN45qJ-world/file'
const { scene } = useGLTF(url, false, false, (loader) => {
useNeedleProgressive(loader as any, gl as any)
})
return <primitive object={scene} />
}
Full model-viewer example at: examples/modelviewer.html
<head>
<!-- Include threejs import map -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three/build/three.module.js",
"three/": "https://unpkg.com/three/"
}
}
</script>
<!-- Include gltf-progressive -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
<!-- Include model-viewer -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
</head>
<body>
<model-viewer src="https://cloud.needle.tools/-/assets/Z23hmXBZN45qJ-ZN45qJ-world/file" camera-controls auto-rotate></model-viewer>
</body>
Needle Engine natively supports progressive loading of these glTF files! See docs.needle.tools for more information.
Use Needle Cloud to generate LODs for your assets (includes hosting, global CDN, password protection, versioning, CLI support...) or use one of the Needle integrations for Unity or Blender.
Create a new class extending NEEDLE_progressive_plugin and add your plugin by calling the static LODSManager.addPlugin(<your_plugin_instance>)
Call lodsManager.awaitLoading(<opts?>) to receive a promise that will resolve when all object LODs that start loading during the next frame have finished to update. Use the optional options parameter to e.g. wait for more frames.
These settings are available on the LOD manager instance:
targetTriangleDensity - The target triangle density is the desired max amount of triangles on screen when the mesh is filling the screen.skinnedMeshAutoUpdateBoundsInterval - The interval in frames to automatically update the bounds of skinned meshes.updateInterval - The update interval in frames. If set to 0, the LODs will be updated every frame. If set to 2, the LODs will be updated every second frame, etc.pause - If set to true, the LODsManager will not update the LODs.manual - When set to true the LODsManager will not update the LODs. This can be used to manually update the LODs using the update method. Otherwise the LODs will be updated automatically when the renderer renders the scene.overrideLodLevel - Can be set to any number between 0 and 6 to override the lod level to be loaded. To disable the override again set it to undefined.Simply call useRaycastMeshes(true) to enable faster raycasting when using the the THREE.Raycaster. This can again be disabled by calling useRaycastMeshes(false). Calling this method is only necessary once to enable it.
Call getRaycastMesh(<your_mesh_object>)
Read more about the NEEDLE_progressive extension
🌵 needle — tools for creators • Twitter • Discord • Forum
[3.3.5] - 2025-10-08
console.log instead of console.debugFAQs
three.js support for loading glTF or GLB files that contain progressive loading data
The npm package @needle-tools/gltf-progressive receives a total of 218 weekly downloads. As such, @needle-tools/gltf-progressive popularity was classified as not popular.
We found that @needle-tools/gltf-progressive demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Socket Threat Research maps a rare inside look at OtterCookie’s npm-Vercel-GitHub chain, adding 197 malicious packages and evidence of North Korean operators.
Research
Socket researchers identified a malicious Chrome extension that manipulates Raydium swaps to inject an undisclosed SOL transfer, quietly routing fees to an attacker wallet.
Research
/Security News
Another wave of Shai-Hulud campaign has hit npm with more than 500 packages and 700+ versions affected.