threejs-errors-rendering

Debugging Workflow Checklist

When a Three.js scene does not render correctly, ALWAYS follow this sequence:

1. Open the browser console -- check for WebGL errors or Three.js warnings
2. Verify the renderer has a non-zero size (renderer.getSize(new THREE.Vector2()))
3. Confirm the canvas is in the DOM and visible (not display: none)
4. Check that renderer.render(scene, camera) is called (in a loop or at least once)
5. Verify the camera is looking at the scene (position, target, near/far)
6. Confirm at least one light exists for lit materials
7. Check material side, visible, opacity, and transparent properties
8. Verify object visible, layers, and frustumCulled properties
9. Inspect color space settings on renderer and textures

Symptom 1: Black Screen (Nothing Visible)