Three.js AI Animation Shows a Blank Scene? A Debugging Checklist

A blank browser canvas is not enough information to diagnose a generated project. First establish what loaded and what failed. This is a diagnostic workflow, not a claim that the Atlas tested every showcased project or that one change fixes every blank scene.

1. Read the first error

Open the browser developer tools and reload. Copy the earliest relevant error with the filename and line number. Later messages may be consequences. Give the coding assistant that error and the relevant file, not only “the animation does not work.” Remove secrets or private data before sharing logs.

2. Check how the project runs

Follow the project's run instructions. Confirm whether it expects a development server or a build step. Check that required packages and files exist. If an asset request fails, inspect its path rather than replacing the whole scene. Missing inputs should be listed explicitly in your brief.

3. Check canvas and framing

Confirm that the canvas has a visible, non-zero size and is not covered by another element. Reduce the scene to a visible object with a simple material and a camera aimed at it. Check clipping, object position and scale before reintroducing complicated lighting or post-processing.

4. Check the render path

Find the code that renders the scene. A static object needs at least a render; animation needs an update path that actually runs. Ask the assistant to explain which function updates the object, which function renders it, and where those functions are called. Verify the explanation against the project.

5. Restore effects one at a time

Once the simple scene works, restore assets, materials, lighting, effects and interaction individually. If the canvas becomes blank after one change, you have narrowed the problem. Inspect the new error or the changed requirement rather than rewriting every prompt.

A useful repair request

The project should show [EXPECTED RESULT]. Instead it shows [OBSERVED RESULT].
The first relevant console error is [ERROR WITH FILE AND LINE].
The smallest scene that still fails is [RELEVANT CODE OR FILES].
Keep the existing dependency versions. Explain the cause, make a focused fix,
and describe how to check the result after resize and on mobile.

Use only code and logs you are allowed to share. A repair request should not include credentials. Keep a short record of the change and the observed result so later edits do not reintroduce it.

Read code animation versus generated video, then browse Three.js prompt references. The preview is a reference; source text can be partial and is labeled accordingly.