@glboost/three

three.js helpers for models hosted on GLBoost: a GLTFLoader already pointed at the Draco, KTX2, and meshopt decoders the CDN serves, a loader that waits while a variant is still being optimized (the CDN answers 202) and tells you when it served a fallback variant, URL builders, and a hook plus a component for react-three-fiber.

npm install @glboost/three three

import { createGLTFLoader, loadAsset } from '@glboost/three';

const loader = createGLTFLoader({ renderer }); // KTX2 support is detected on your renderer
const gltf = await loadAsset(loader, 'abcdefghjkmn', {
  preset: 'gpu',
  onFallback: ({ served }) => console.log('serving', served, 'until gpu is ready'),
});
scene.add(gltf.scene);

createGLTFLoader({ base, renderer, draco, ktx2, meshopt, retry, onFallback }) returns a GLBoostGLTFLoader (a GLTFLoader subclass) that also works with loader.load(url, …) and loader.loadAsync(url). configureLoader(existingLoader, options) does the same on your own loader. assetUrl(id, { preset, spec, v }) builds delivery URLs; signedAssetUrl({ assetId, signingKey, exp, … }) signs them (server-side only).

react-three-fiber

import { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
import { GLBoostModel, useGLBoost } from '@glboost/three/r3f';

function Chair() {
  const { scene } = useGLBoost('abcdefghjkmn', { preset: 'gpu' });
  return <primitive object={scene} />;
}

<Canvas>
  <Suspense fallback={null}>
    <Chair />
    <GLBoostModel asset="k7m2p9q4r1s8" position={[1, 0, 0]} />
  </Suspense>
</Canvas>;

useGLBoost.preload(id, options) and useGLBoost.clear(id, options) mirror useLoader's.

Docs: https://glboost.com/docs/loaders