Make an Agent Grade a 3D Scene

Build a three.js scene and use a separate AI critic to match an image target.

Introduction

30 Second Summary

A 3D scene can load without errors yet still feel flat beside the image you imagined. Those visual gaps become easy to miss when the builder also judges the result.

In this project, you will use a coding agent to create a browser-based three.js room from a generated target image. A separate critic agent will compare the live render with that target across three rounds.

What You'll Build

Picture your target image beside the live room as each critic round pulls the render closer to the visual goal you aimed for.

By the end of this project, you'll have:

A side-by-side browser demo where your generated target sits beside a live three.js room.
A three-round critic log that records specific visual gaps from each comparison.
A round-one versus round-three screenshot that shows how the lighting, materials, and composition changed.
Secret Mission: Try an optional challenge that pushes your visual grading loop further.

Are there any prerequisites?

Your coding agent needs image generation plus vision so it can create the target and inspect the render.

Access to subagents is strongly preferred because the critic should run separately from the agent that builds the scene.

Before We Start

The visual critique loop needs a reliable place to work. Your browser displays the render.

Your terminal gives the coding agent access to local project files. In this step, you'll confirm each tool is available before reserving a writable folder for the three.js scene.

In this step, get ready to:

Confirm your browser is available.
Confirm your coding workspace is available.
Create a writable folder for the scene project.

Confirm your core tools

The browser shows the visual result. The terminal gives you direct access to the project folder.

Your coding agent works inside that folder. A short test confirms it can accept a request.

Press Cmd+Space on macOS or the Windows key on Windows to open your app search.
Enter the name of your modern web browser.
Press Enter to launch the browser.
Return to your app search.
Enter Terminal on macOS or PowerShell on Windows.
Press Enter to launch the terminal.
Access your coding agent from its installed app or web workspace.
Send Reply with READY only. as a new request.

You should see a browser window plus a terminal prompt.

Your coding agent should answer READY. With all three responding, the workflow has every tool it needs.

Missing One of the Tools?

Use the official installation guide for the missing browser or terminal application.
Use your coding agent provider's setup guide if its workspace does not open.
Check your internet connection if the coding agent does not answer.

Still blocked? Help me identify which part of my local workspace is missing.

Create your project folder

The project folder becomes the shared home for the scene page. It also keeps the target image plus critic notes together.

Switch back to the terminal from the previous check.

Before you run the commands, picture the folder name you expect at the end of the final path.

macOS

Create the threejs-scene folder on your Desktop by running these commands:

cd ~/Desktop
pwd
mkdir threejs-scene
cd threejs-scene
pwd

What Do These Commands Do?

The first cd command moves your terminal to the Desktop.
The first pwd command prints the Desktop path.
The mkdir command creates the project folder.
The second cd command moves into the new folder.
The final pwd command prints the project folder path.

The final path should end with /Desktop/threejs-scene. That output confirms the writable local folder is reserved for your scene project.

Folder Command Did Not Finish?

Check that the Desktop folder exists under your current user account.
Choose a fresh folder name if threejs-scene already belongs to another project.
Update the folder name in both mkdir and the second cd command.

Need another pair of eyes? Help me troubleshoot why the project folder was not created.

Windows

Create the threejs-scene folder on your Desktop by running these commands in PowerShell:

$DesktopPath = [Environment]::GetFolderPath('Desktop')
Set-Location -Path $DesktopPath
Get-Location
New-Item -Path . -Name "threejs-scene" -ItemType "Directory"
Set-Location -Path "threejs-scene"
Get-Location

What Do These Commands Do?

The first command retrieves the Desktop path for your Windows account.
The first Set-Location command moves PowerShell to that Desktop.
The first Get-Location command prints the Desktop path.
The New-Item command creates the project folder.
The second Set-Location command moves into the new folder.
The final Get-Location command prints the project folder path.

The final path should end with Desktop\threejs-scene. That output confirms the writable local folder is reserved for your scene project.

Folder Command Did Not Finish?

Confirm that you ran the commands in PowerShell.
Choose a fresh folder name if threejs-scene already belongs to another project.
Update the folder name in both New-Item and the second Set-Location command.

Need another pair of eyes? Help me troubleshoot why PowerShell cannot create the project folder.

That's the foundation in place. Your tools respond correctly while your project has a writable home.

✔️ My workspace is ready

Your browser, terminal, coding agent, plus writable project folder are ready. The next step can install the agent skill without any more setup.

ⓧ I'd like to double check my setup

Your setup should match this checkpoint:

A modern web browser opens normally.
A terminal displays a command prompt.
A coding agent accepts a new request.
A writable local folder named threejs-scene exists on your Desktop.

Your workspace is ready. Next up, you'll install the skill that guides the visual critique loop.

Install and Verify the Skill

The dream loop begins with image generation. Its critic relies on vision to inspect the future three.js render.

If either capability is missing, the later comparison loop cannot run. This step installs the agent skill before proving both visual tools are ready.

In this step, get ready to:

Install the dream-loop skill with its documented command.
Confirm your coding agent lists the installed skill.
Complete a visual capability check with one test image.

Install the dream-loop skill

The dream-loop skill defines a loop from target image to build to critic feedback to refinement. Installing it makes that workflow available to your coding agent.

Install the skill in your terminal from earlier by running this command:

npx skills add achimala/dream-loop

What does this command do?

The npx command runs the skills installer from your terminal.
The skills add part tells the installer to add a skill.
The achimala/dream-loop value points the installer at the dream-loop source.

Allow the installation process to finish.
Check the terminal's final status for a successful installation of achimala/dream-loop.

That clears the first gate. The dream-loop workflow is now installed for your coding agent to load.

Did the installation fail?

Check that your existing development environment provides npx.
Use your coding agent's official setup instructions if its image or skill integration needs enabling.
Repeat the installation command after resolving the reported environment issue.

Still stuck? Help me troubleshoot the dream-loop skill installation.

Confirm the skill is available

Skill discovery is a little fiddly because each coding agent exposes installed skills differently. A direct inventory request gives you a check that works across agent interfaces.

Return to your coding agent from earlier.
Ask it to report the skills loaded in its current session by sending this prompt:

List the agent skills loaded in this session. Use your actual available-skills inventory. For each skill, give its exact name and a one-sentence purpose.

What does this prompt check?

The prompt asks the agent to inspect its loaded skill inventory. This verifies that the installation reached the agent you plan to use.

Read the returned skill inventory.
Locate dream-loop in the list.

You should see dream-loop with a purpose related to generating a visual target before refining work through critic feedback. That confirms your coding agent can discover the installed workflow.

Can't find dream-loop?

Restart the current coding-agent session so it reloads installed skills.
Send the skill inventory prompt again after the session reloads.
Repeat the installation if the terminal installed the skill for a different coding agent.

Need another pair of eyes? Help me work out why dream-loop is missing from my coding agent's skill inventory.

Test image generation and vision

Image generation may use credits from your existing agent setup. This check keeps the request to one plain image.

Ask your coding agent to create the test image by sending this prompt:

Generate one small test image of a matte red cube on a plain white background. Return it as an image file in this conversation so you can inspect it next.

Why use a simple cube?

The red color gives the later vision check one clear visual detail.
The white background provides a second detail that is easy to verify.
The matte finish tests whether the agent can inspect surface appearance.

Wait for the agent to return an image file.
Confirm the image shows a red cube on a white background.

The generated image proves that your agent can create a visual reference. You now have a controlled file for the vision check.

Didn't receive an image file?

Confirm that image generation is enabled in your coding agent's current setup.
Follow your coding agent's official image-generation setup instructions if the capability is unavailable.
Repeat the cube prompt after enabling the capability.

Need help with the capability check? Help me diagnose why my coding agent returned text instead of an image file.

Before the agent inspects the file, do you think it will identify all three visual details?

Ask the agent to inspect the generated file by sending this prompt:

Inspect the image file from your previous response. Describe the cube's color, the background, and the cube's surface finish. Base your answer only on the pixels you can see.

What makes this a vision test?

The prompt asks for details that come from the image pixels. Requiring the agent to inspect its previous file tests whether vision can read generated output.

Compare the agent's description with the generated image.

You should see a description of a red cube with a white background plus a matte surface. The visual gate is cleared because your agent has now generated an image file and inspected its contents.

Can't the agent inspect the image?

Attach the generated image file to a new message if your coding agent requires manual image uploads.
Enable vision through your coding agent's documented setup if image inspection is unavailable.
Repeat the inspection prompt after the agent can access the file.

Still blocked? Help me verify whether my coding agent can inspect an image file.

Your coding agent now lists dream-loop with both visual capabilities confirmed. Next up, you will generate the target image that guides the scene.

Generate the Target Image

Your coding agent can now create images. It can also inspect them with vision.

A scene that merely runs can still look flat. A generated target gives your three.js build a fixed visual standard before any scene code exists.

In this step, get ready to:

Define a small single-room target with window light.
Generate target-image.png in the project folder.
Open the image to inspect its visual choices.

Frame the single-room target

A small room keeps the visual brief achievable in one browser scene. The window gives the later lighting work a clear direction.

Why use one small room?

A single room gives the later build one camera view plus one main lighting problem. One visible window creates a clear reference for every comparison.

Switch back to the coding agent from the previous step.
Set the agent's workspace to the project folder from earlier.
Ask the agent to use the installed image-generation skill for a small single-room 3D scene.
Specify a single window as the source of light entering the room.
Request a camera angle that makes the room layout easy to read.
Ask the agent to make the surface materials visually distinct.
Ask the agent to create a clear atmosphere through colour plus contrast.
Tell the agent to save the result as target-image.png in the project folder.

The agent should complete one image generation. Its response should confirm that target-image.png was saved in the project folder.

Did the agent skip the image?

Remind the agent to use the installed image-generation skill if it responds with a written scene description.
Ask the agent to save the same generated result as target-image.png if the image only appears in its response.

Still missing the image? Help me check why my coding agent did not generate or save the target image.

Confirm the image file

The saved file becomes the durable reference for later render comparisons. Confirming it now prevents the target from being trapped inside the agent's response.

Use your computer's file browser to return to the project folder from earlier.
Find target-image.png in that folder.

You should see target-image.png listed as an image file. That file is your first concrete scene artifact.

Cannot find the saved file?

Check that you are viewing the same project folder used as the agent's workspace.
Return to the coding agent if the file is absent.
Ask the agent to save the generated image directly inside the current project folder as target-image.png.

Still cannot locate it? Help me locate the generated target image in my project folder.

Inspect the visual target

The image now acts as the visual brief for the scene. You need to understand its lighting, composition, materials, plus atmosphere before building against it.

Before you open the image, where do you expect the brightest area to appear in relation to the window?

Double-click target-image.png to open it in your image viewer.

You should see a small single-room scene with light entering through a visible window. The room should have enough detail to guide a browser-based recreation.

Image preview will not open?

Confirm that the file name ends with .png.
Try another image viewer if your current viewer cannot display the file.
Ask the coding agent to inspect target-image.png if the file appears empty or damaged.

Still unable to view it? Help me diagnose why target-image.png will not open.

Before the final check, do you think the image gives you one specific visual choice to identify in each category?

Trace the brightest area back to the visible window.
Identify the part of the room that anchors the composition.
Compare the surfaces to determine which appear matte or reflective.
Describe the atmosphere created by the image's brightness plus colour.

Success means you can trace the light from the window. You can also point to the part of the room that anchors the composition.

The surface finishes should be readable. The overall atmosphere should also be clear.

Your visual reference is fixed inside target-image.png. Next, you'll turn that image into the first three.js scene.

Build the First Scene

Your target image now gives this project a visual finish line. The next goal is to turn that reference into a room that runs in your browser.

The three.js library gives your coding agent the building blocks for a browser-based 3D scene. This first build creates a working baseline for later critic rounds.

In this step, get ready to:

Give your coding agent the target image as a visual brief.
Generate the complete first-pass room as a single page.
Open the live scene to establish a visual baseline.

Give the agent the visual brief

The target image acts as the visual brief for this build. Your agent needs to read that image before it decides how the room should look.

Switch back to the coding agent from earlier.
Reference target-image.png as the visual source for the scene.
Ask the agent to read the image before it writes the scene.
Tell the agent to create index.html as a single-page scene built with three.js.
Tell the agent to keep the scope to one small room.
Require the page to open directly from the local file in a modern browser.
Tell the agent to stop after the first working pass.
Send the request.

The agent should report that it created index.html in the project folder. That is the first build complete: the file now holds your agent's visual interpretation of the target.

Check the scene structure

A useful baseline needs the complete scene structure in place. The later critic can only judge visual choices that already exist in the render.

Write a follow-up audit request for index.html.
Include a camera that frames the room.
Include room geometry that forms the interior.
Include a visible window.
Include lighting based on the target image.
Include materials based on the target image.
Ask the agent to add only missing checklist items.
Send the audit request.

The agent should confirm that every required element exists in index.html. You now have a complete structural baseline for the visual comparison.

Open the first live render

A browser render proves the generated file can run. It also gives you the baseline image that the critic needs next.

Locate index.html inside the project folder from earlier.

Before you open the page, do you think one build pass can reproduce the target closely?

Double-click index.html to open it in your default browser.

You should see a working room scene with a visible interior. The browser page confirms that the camera can render the generated scene.

Seeing a blank page?

Return to the coding agent from earlier.
Tell it that index.html does not produce a visible room when opened as a local file.
Ask it to repair only the runtime problem.
Reopen index.html in your browser.

Help me debug the first local scene render.

Switch back to target-image.png from earlier.
Return to the browser tab showing the live render.
Compare the overall room composition.
Compare how the window light falls across the room.

The first render does not yet closely match target-image.png. That visible gap is the intended baseline for the next stage of the loop.

Why keep the first pass?

Keeping this render unchanged preserves evidence of what the agent produced from the target alone. The later critic can judge that baseline without hidden manual corrections.

Your first room is live in the browser. Next, a separate critic agent will compare the render with the target image and identify the most important gaps.

Get an Independent Critique

Your first three.js room is running in the browser. That first render gives you something concrete to compare with target-image.png.

The scene-building agent already understands its own choices, which can make weak matches feel acceptable. A separate AI agent can judge the target and render from a fresh perspective.

In this step, get ready to:

Create a critic agent that is separate from the scene-building agent.
Compare the target image with the first live render across specific visual categories.
Save prioritized improvement notes in critic-round-1.md.

Create a separate critic agent

Independent critique needs a clean context boundary. The critic should inspect visible evidence without editing index.html or defending the builder's decisions.

Why must the critic be separate?

A builder can become attached to the choices it already made. A separate critic begins with the target and render as its evidence.

That separation makes visible mismatches easier to identify. It also keeps criticism distinct from implementation.

Your coding agent determines which separation path is available.

✔️ I can start a subagent

In the coding agent from earlier, ask the scene-building agent to start a new subagent whose only role is visual criticism.
Ask the new critic to confirm that it can inspect target-image.png plus the live browser render of index.html.

ⓧ I need a separate session

Start a fresh conversation in the coding agent from earlier using the existing project folder.
Ask the new agent to confirm its critic-only role plus access to target-image.png and the live render.

You should receive confirmation that the critic can inspect both visual references. Your builder and grader now have separate roles.

Can the critic see only one image?

Confirm that the critic is using the existing project folder containing target-image.png.
Ask the critic to inspect the browser tab from earlier that shows the first render of index.html.
Ask the critic to use the image-reading capability you confirmed during setup.

Still blocked? Help me give my separate critic agent access to the target image and live browser render.

Compare the target with the render

Useful criticism connects each visible difference to a concrete improvement. A priority order keeps the next refinement round focused on the changes with the greatest visual impact.

What Should the Critic Inspect?

Light direction covers the side and angle from which illumination enters the room.
Shadow quality covers softness, intensity, and placement.
Camera framing covers the viewpoint, crop, and composition.
Object proportions cover the relative scale and placement of room geometry.
Color covers the visible tones of surfaces plus the overall image.
Material roughness covers how matte or reflective each surface appears.

Before you send the comparison request, predict which visual category the critic will rank first.

Send the critic a request to compare target-image.png with the first live render. The request must cover every visual category above. Each note must identify a visible difference. Each note must recommend one concrete scene change. The final list must be ordered by visual impact. The critic must save the findings in critic-round-1.md.

The critic should create a ranked set of comparison notes. Each priority should connect a visible mismatch to a specific improvement for the scene.

No File or Vague Notes?

Ask the same critic to save its existing response as critic-round-1.md if the notes only appear in the conversation.
Ask the critic to replace broad judgments with observations about the target plus the render.
Require every priority to include one concrete scene change.

Need more specific feedback? Help me turn my critic agent's vague 3D scene feedback into prioritized visual changes.

Verify and preserve the critique

The critique becomes a reusable project artifact when it is specific and stored beside the scene. You can now verify that the file provides a clear plan for the next refinement round.

Before you inspect the file, predict whether the critic's top priorities will match the differences you noticed.

Return to the project folder view in your coding agent.
Select critic-round-1.md from the project folder.
Review the ranked visual improvements in the file.
Compare the highest-priority note with target-image.png plus the first live render.

You should see prioritized notes covering light direction, shadow quality, camera framing, object proportions, color, and material roughness. The notes should describe concrete differences between the target and the first render.

That is a meaningful checkpoint: your first render now has an independent, prioritized improvement plan. Next, you will apply those notes to move the scene closer to its target.

Apply the First Critique

Your first render works. An independent AI agent has identified the visible gaps between that render and the target image.

Now you'll turn those notes into one focused revision of the three.js scene. The goal is a second render with stronger composition.

Its lighting should move closer to the target. Its materials should also match more closely.

In this step, get ready to:

Choose the three critic notes with the largest visual impact.
Revise the three.js scene from those priorities.
Prove the second render is closer with a side-by-side comparison.

Prioritize the critic's notes

A critic list can become noisy when every note competes for attention. Prioritization turns it into a short visual checklist.

Return to critic-round-1.md from earlier.
Identify the highest-priority note that changes the camera framing.
Identify the highest-priority note that changes the lighting or shadows.
Identify the highest-priority note that changes the geometry, color, or material roughness.

The decision-heavy part is done. You now have three changes whose effects will be easy to spot.

Revise the scene from evidence

The scene-building agent now acts on evidence chosen by the critic. Keeping those roles separate preserves the independent standard from the previous step.

Switch back to the scene-building agent from earlier.
Give the agent access to critic-round-1.md, index.html, and target-image.png.
Ask the agent to apply one focused revision directly to index.html using the three selected notes.
Switch back to the browser tab showing the live index.html scene.
Reload the page.

You should see the room's framing move closer to the target composition.

The light entering through the window should reflect the critic's selected lighting note.

The chosen geometry or material detail should also show a visible revision.

Scene gone blank?

Ask the scene-building agent to inspect its latest edit for a syntax problem.
Tell the agent to restore the last working structure before applying the selected notes individually.
Check that your browser is still displaying the revised index.html from the project folder.

Still stuck? Help me diagnose why my revised three.js scene is blank.

Compare the target and revised render

Visual memory hides small differences after a page reload. A side-by-side view makes the remaining gaps visible.

Before you compare the two versions, which selected note do you expect to create the largest visible improvement?

Open target-image.png from the project folder in a second browser window.
Switch back to the browser window showing the reloaded index.html.
Position the two browser windows side by side.
Resize both browser windows to similar dimensions.
Compare the camera framing first.
Compare the window light next.
Compare the shadows next.
Compare the materials and proportions last.

The second render should now sit visibly closer to the target in composition.

The revised light should follow the target's window direction more closely.

The selected geometry or material change should reduce another visible mismatch.

You have closed the first feedback loop. The independent critique now exists as visible changes in a scene you own.

Your second render is closer to the target. Next, you'll run one more independent round to find the gaps that remain.

Run the Final Comparison

Your second three.js render is already closer to the target. This final pass tests whether an independent critic can still find a useful gap.

A fresh coding agent context evaluates the visual evidence without defending the existing scene. One bounded round gives you enough evidence to judge whether the loop still helps.

In this step, get ready to:

Run a second independent critic pass on the revised render.
Apply the highest-priority feedback to index.html.
Capture round one beside round three in one comparison screenshot.

Run a second independent critique

The second critic compares the revised render with target-image.png. A fresh context reduces the chance of repeating the builder's assumptions.

Why use a fresh critic?

The builder already knows why each visual choice was made. A fresh critic judges only the visible result.

That separation makes the remaining feedback more specific. It also keeps agreement from replacing evaluation.

Before the critic compares the images, which remaining mismatch do you expect it to rank first?

Start a fresh critic context in your coding agent.
Add target-image.png as the visual reference.
Add the available second render as the comparison image.
Request a ranked list of the remaining visual mismatches.
Require every note to name one visible gap.
Require every note to propose one concrete change to index.html.
Ask the critic to save its notes as critic-round-2.md in the project folder.
Return to the project folder in your file browser.
Confirm that critic-round-2.md is listed.

You should see critic-round-2.md in the project folder. Its first item should identify a visible mismatch in the revised render.

That closes the final feedback round. You now have an independent plan for the last revision.

Apply the final visual fixes

The second critique also acts as a stop rule. You apply its prioritized fixes once.

Switch back to the coding agent context that revised index.html earlier.
Ask the agent to apply only the prioritized changes from critic-round-2.md to index.html.
Confirm that the updated index.html is saved in the project folder.

Before you reload the scene, which critic-led change do you expect to make the biggest visible difference?

Switch back to the browser layout from earlier.
Reload index.html.

You should see the final third render beside target-image.png. At least one high-priority mismatch from the second critique should now be reduced.

Did the final render regress?

Ask the editing agent to inspect only the newest changes if the page no longer loads.
Ask the agent to revert the lowest-priority change if the target match became worse.

Still stuck? Help me diagnose why my final three.js render regressed after applying critic-round-2.md.

Ask the agent to record its applied changes at the bottom of critic-round-2.md.
Confirm that critic-round-2.md now contains the critique plus the final change record.

There it is. Your third render now reflects two independent rounds of visual feedback.

Capture the round-one comparison

The final artifact should show progress without relying on memory. A single image of round one beside round three makes the improvement inspectable.

Before you place the renders together, where do you expect the largest difference to appear?

Place the retained round-one render on the left side of your screen.
Place the final third render on the right side of your screen.
Match the visible display size of both renders.
Capture both renders in one image with your computer's screenshot tool.
Save the screenshot as round-1-vs-round-3.png in the project folder.
Return to the project folder in your file browser.
Confirm that every final artifact is present.

Final artifact check

The final scene page is stored in index.html.
The generated visual reference is stored in target-image.png.
The first independent critique is stored in critic-round-1.md.
The second critique plus its final change record is stored in critic-round-2.md.
The initial baseline beside the final render is stored in round-1-vs-round-3.png.

You should see round one beside round three in round-1-vs-round-3.png. The final render should show clearer progress in composition.

Its lighting or material appearance should also sit closer to the target. You closed the loop with visual proof.

Secret mission

Define a Stop Rule for the Critic Loop

Use your target image, two critic-note files, and round-one-versus-round-three screenshot to judge whether the loop has converged. Then define a three-gate stopping rule you can reuse before spending time on another render.

Clean Up Your Resources

Keeping these local files creates no ongoing project cost. Decide whether to keep the files, pause the work, or delete the folder.

Resources you used:

Local project folder containing index.html, target-image.png, critic-round-1.md, critic-round-2.md, and round-1-vs-round-3.png.
Browser tab displaying the final third render from index.html.

The installed skill stays available

This cleanup covers the local artifacts created for the scene. The coding agent's image and vision skill remains installed because this project does not establish a verified removal path.

Keep everything running

No action is needed. Choose this if you want to review the scene or run another critic round.

Keep the page, target image, critic notes, and comparison screenshot together in the project folder.
Leave the browser tab displaying the final third render open.
Use round-1-vs-round-3.png to revisit the visible improvement between the first render and the final render.

Pause - I'll come back to this later

Close the active work surfaces to free up memory. Keep the project folder unchanged so you can resume from the final scene.

Close the browser tab displaying the final third render.
End the coding agent session that has the project folder loaded.
Keep index.html, target-image.png, both critic-note files, and round-1-vs-round-3.png inside the project folder.
Return to the project folder from earlier when you are ready to resume.
Open index.html in your browser to load the final third render again.

Delete - I don't want to use this again

Deleting this folder is permanent. The file check below helps you confirm that you have the right folder before it disappears.

Close the browser tab displaying the final third render.
End the coding agent session that has the project folder loaded.

macOS

Press Cmd+Space to open the search bar.
Type Finder and press Enter to open it.
Navigate to the parent directory that contains the project folder from earlier.
Confirm the project folder contains index.html, target-image.png, both critic-note files, and round-1-vs-round-3.png.
Move the project folder into your computer's trash area.
Permanently clear the project folder from the trash area.
Confirm the project folder is absent from its previous location.

Windows

Press the Windows key to open the search bar.
Type File Explorer and press Enter to open it.
Navigate to the parent directory that contains the project folder from earlier.
Confirm the project folder contains index.html, target-image.png, both critic-note files, and round-1-vs-round-3.png.
Move the project folder into your computer's recycle area.
Permanently clear the project folder from the recycle area.
Confirm the project folder is absent from its previous location.

Linux

Open your desktop's application menu.
Select the installed file manager.
Navigate to the parent directory that contains the project folder from earlier.
Confirm the project folder contains index.html, target-image.png, both critic-note files, and round-1-vs-round-3.png.
Move the project folder into your computer's trash area.
Permanently clear the project folder from the trash area.
Confirm the project folder is absent from its previous location.

Nice Work!

You did it! You turned a flat first draft into a three.js room scene that visibly moves closer to its target over two critic rounds. Your comparison screenshot proves how much the scene improved from round one to round three.

You've learned how to:

Built a browser-based 3D scene in index.html against the visual goal in target-image.png.
Ran two independent critic rounds that compared each render with the target image. Turned each critique into visible scene improvements.
Captured visual proof of the improvement in round-1-vs-round-3.png. Organized the complete evaluation trail inside your project folder.
Completed an optional Secret Mission to push your skills even further.

Ready to quiz yourself?