references/gltf-loading-starter.md

# GLB Loading Starter

Use this as the canonical minimal pattern for loading shipped 3D content.

## Vanilla Three.js

```ts
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

const draco = new DRACOLoader();
draco.setDecoderPath("/draco/");

const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(draco);

gltfLoader.load("/assets/hero.glb", (gltf) => {
  const root = gltf.scene;
  root.traverse((node) => {
    if ("castShadow" in node) {
      node.castShadow = true;
      node.receiveShadow = true;
    }
  });
  scene.add(root);
});
```

## React Three Fiber

```tsx
import { useGLTF } from "@react-three/drei";

function HeroModel() {
  const gltf = useGLTF("/assets/hero.glb");
  return <primitive object={gltf.scene} />;
}
```

## Notes

- Default shipping format is GLB or glTF 2.0.
- Keep optimization upstream in the asset pipeline; loader code should stay boring.