Common loading errors in Three.js

Arrrgg! Something went wrong

Model appears black

The model loaded but renders as a dark silhouette. This almost always means your scene has no lights and no environment map. glTF models use MeshStandardMaterial, which requires light to be visible. Add a directional light, an ambient light, or set scene.environment to an environment map.

Model is invisible (too small or too large)

The model loaded successfully but you can't see it. It's either microscopic or it's so large the camera is inside it. Log the bounding box to check:

const box = new THREE.Box3().setFromObject(gltf.scene);
const size = box.getSize(new THREE.Vector3());
console.log('Model size:', size.x, size.y, size.z);
// If size is 0.001 or 10000, scale accordingly

Textures look wrong (washed out or too dark)

Make sure your renderer has the correct output color space and tone mapping:

renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;

CORS errors when loading from a different domain

Browsers block cross-origin requests by default. If your model is hosted on a CDN or different server, the server must include the Access-Control-Allow-Origin header. For development, serve assets from your local dev server's public directory to avoid CORS entirely.