VibeRPGSimulator

Model to Three.js viewer

Quest: Generate a 3D model and show it in a Three.js viewer

Proposed, not tested

Equipment

Sculptor Claude Code
Quest
Generate a 3D model and show it in a Three.js viewer
Hero
Claude CodeThe agent that runs the quest
Class
Sculptor · 3D modeling
Weapon
Claude Sonnet 5.5Longsword: Balanced speed and depthMana rate 10 per 1k tokens
Charge
HighReasoning effort
Author
The curator

Meshy makes the GLB, the Three.js scrolls load and light it, and Playwright opens the page to check that the model actually renders.

Can't be appraised: Proving Grounds can't equip orbs (MCP servers).

Skill tree

  1. ScoutGather context

    Nothing equipped here

  2. CraftMake the thing

  3. TestCheck the work

  4. ShipDeliver it

    Nothing equipped here

Quest replay

Quest: "Generate a 3D model and show it in a Three.js viewer". Four waves, then the Backlog Dragon.

Foes

  • Fog Wraith

Party · Context

  • Claude CodeSculptor100/100

  1. Wave 1 of 4 · Scout

    The Fog Wraith steps up.

    What really happensGather context

    Claude Code: Context 100/100.

  2. Explore

    Claude Code sends Explore, a fox scout, into the fog.

    What really happensClaude Code can hand a codebase search to its built-in Explore subagent, which works in its own context window.

    Explore: Context 40/40.

  3. Explore

    Explore sniffs out the right files.

    What really happensThe subagent reads and searches. None of that output lands in the main context.

    Fog Wraith takes 18.

  4. Longsword

    Claude Code swings the Longsword.

    Fog Wraith takes 42 (critical hit). Fog Wraith falls.

  5. Explore

    Explore returns with a short report.

    What really happensOnly the subagent's final summary comes back to the main agent.

    Claude Code takes 2. Claude Code: Context 98/100. Claude Code: Insight. Explore returns.

  6. Wave 2 of 4 · Craft

    The Clay Golem steps up.

    What really happensMake the thing

  7. Meshy 3D Generation

    A scroll that sends Meshy CLI to forge a 3D asset and save the files.

    What really happensIt submits once with create --async, keeps the task id, and waits. A timeout does not authorize another paid create.

    Clay Golem takes 96 (critical hit).

  8. Slump

    The unshaped clay slams down.

    What really happensA model or part takes pass after pass before it holds its shape.

    Claude Code takes 7. Claude Code: Context 91/100.

  9. Three.js Loaders

    A scroll that shows how to load glTF models and environments in three.js.

    What really happensLoadingManager reports combined progress. loadAsync still rejects on failure. manager.abort cancels loaders that use FileLoader, not TextureLoader.

    Clay Golem takes 3 (critical hit).

  10. Three.js Geometry

    A scroll that shows how to shape meshes, points and lines in three.js.

    What really happensThe skill shows built-in geometries, TextGeometry from a .typeface.json font, ExtrudeGeometry, LatheGeometry, and TubeGeometry.

    Clay Golem takes 1. Clay Golem falls.

  11. Wave 3 of 4 · Test

    The Bug Slime and the Flaky Wisp step up.

    What really happensCheck the work

    Flaky Wisp: Flicker.

  12. Flicker

    The Flaky Wisp uses Flicker.

    Claude Code takes 3. Claude Code: Context 88/100.

  13. Microsoft Playwright MCP

    An orb that opens a live browser so the hero can click through your app.

    What really happensEach step returns an accessibility snapshot, a structured list of page elements, so the agent works without reading pixels.

    Flaky Wisp avoids the hit.

  14. Pinned

    Pinned in place, it cannot slip away.

    What really happensA test that runs the same way each time shows the real failure.

    Bug Slime: Pinned. Flaky Wisp: Pinned.

  15. Regress

    The Bug Slime uses Regress.

    Claude Code takes 3. Claude Code: Context 85/100.

  16. Flicker

    The Flaky Wisp uses Flicker.

    Claude Code takes 3. Claude Code: Context 82/100.

  17. Longsword

    Claude Code swings the Longsword.

    Flaky Wisp takes 38.

  18. Regress

    The Bug Slime uses Regress.

    Claude Code takes 3. Claude Code: Context 79/100.

  19. Flicker

    The Flaky Wisp uses Flicker.

    Claude Code takes 3. Claude Code: Context 76/100.

  20. Longsword

    Claude Code swings the Longsword.

    Flaky Wisp takes 2. Flaky Wisp falls.

  21. Regress

    The Bug Slime uses Regress.

    Claude Code takes 3. Claude Code: Context 73/100.

  22. Longsword

    Claude Code swings the Longsword.

    Bug Slime takes 43.

  23. Longsword

    Claude Code swings the Longsword.

    Bug Slime takes 2. Bug Slime falls.

  24. Wave 4 of 4 · Ship

    The Gate Warden steps up.

    What really happensDeliver it

    Gate Warden: Barrier.

  25. Boss · Backlog Dragon

    The Backlog Dragon guards the quest: "Generate a 3D model and show it in a Three.js viewer".

    What really happensIt stands for the whole quest, every task on the list.

  26. Longsword

    Claude Code swings the Longsword.

    Gate Warden is behind a barrier.

  27. Scope creep

    The dragon breathes scope creep across the party.

    What really happensNew asks pile onto a task while it is underway.

    Claude Code takes 5. Claude Code: Context 68/100.

  28. Bar the gate

    The warden raises the gate. Nothing passes until the checks are green.

    What really happensA release waits until tests, builds and reviews pass.

  29. Longsword

    Claude Code swings the Longsword.

    Gate Warden is behind a barrier.

  30. Claw

    The Backlog Dragon uses Claw.

    Claude Code takes 6. Claude Code: Context 62/100.

  31. Longsword

    Claude Code swings the Longsword.

    Gate Warden takes 37.

  32. Gate open

    The checks turn green and the gate opens.

    What really happensTests, build and review pass, so the release can go.

  33. Bar the gate

    The Gate Warden swings the gate shut.

    Claude Code takes 5. Claude Code: Context 57/100.

  34. Scope creep

    The Backlog Dragon uses Scope creep.

    Claude Code takes 5. Claude Code: Context 52/100.

  35. Longsword

    Claude Code swings the Longsword.

    Gate Warden takes 23. Gate Warden falls.

  36. Claw

    The Backlog Dragon uses Claw.

    Claude Code takes 6. Claude Code: Context 46/100.

  37. Longsword

    Claude Code swings the Longsword.

    Backlog Dragon takes 58 (critical hit).

  38. Scope creep

    The Backlog Dragon uses Scope creep.

    Claude Code takes 5. Claude Code: Context 41/100.

  39. Longsword

    Claude Code swings the Longsword.

    Backlog Dragon takes 36.

  40. Call the backlog

    The dragon roars, and another task crawls out of the backlog.

    What really happensFinishing one task often surfaces the next one on the list.

  41. Longsword

    Claude Code swings the Longsword.

    Bug Slime takes 25. Bug Slime falls.

  42. Scope creep

    The Backlog Dragon uses Scope creep.

    Claude Code takes 5. Claude Code: Context 36/100.

  43. Longsword

    Claude Code swings the Longsword.

    Backlog Dragon takes 58 (critical hit).

  44. Claw

    The Backlog Dragon uses Claw.

    Claude Code takes 6. Claude Code: Context 30/100.

  45. Longsword

    Claude Code swings the Longsword.

    Backlog Dragon takes 41.

  46. Enraged

    Wounded, the dragon rages.

    What really happensThe last stretch of a big job is often the hardest.

    Backlog Dragon: Enraged.

  47. Longsword

    Claude Code swings the Longsword.

    Backlog Dragon takes 27. Backlog Dragon falls.

  48. Quest clear

    The Backlog Dragon falls. Quest complete.

    What really happensEvery equipped spell did its part of "Generate a 3D model and show it in a Three.js viewer".

After the battle

  • Claude Code took 19 turns to clear four waves.
  • Context ended at 30 of 100.
  • No Scout or Ship spell, so those waves ran on basic attacks.
  • Summons took 0 damage in their own context and brought back 1 report.

Copy this loadout

Prompt for Claude Code

Paste this into Claude Code. It installs each spell, leaves API keys and sign-ins to you, and ends with the command that restarts it with this weapon and charge.

Set up these tools for me in Claude Code.
Loadout: https://vibe-rpg-simulator.vercel.app/loadouts/threejs-model-viewer/

1. Meshy 3D Generation
   Source: https://github.com/meshy-dev/meshy-3d-agent
   Run:
     npm install -g meshy-cli@0.4.3
     npx -y skills add meshy-dev/meshy-3d-agent --skill meshy-3d-generation --skill meshy-3d-printing -g -y

2. Three.js Loaders
   Source: https://github.com/CloudAI-X/threejs-skills
   Run:
     npx skills add cloudai-x/threejs-skills

3. Three.js Geometry
   Source: https://github.com/CloudAI-X/threejs-skills
   Run:
     npx skills add cloudai-x/threejs-skills

4. Microsoft Playwright MCP
   Source: https://github.com/microsoft/playwright-mcp
   Run:
     claude mcp add playwright npx @playwright/mcp@latest

How to do it:
- Skip anything that is already installed. Run the rest in order and check that each step worked.
- Never ask me to paste an API key or token into this chat. When a command needs one, such as YOUR_API_KEY, give me the full command to run in my own terminal.
- Ask me for any other value you can't work out, such as a project path.
- If a command asks a question or needs a browser sign-in or an open app, tell me what to do and wait.
- If a command fails, follow the install steps in the tool's source for Claude Code instead. Show me any command that is not on this list before you run it, and install nothing else.

When you're done, tell me what is ready and what still needs me. New tools load in a new session, so finish by telling me to restart Claude Code with Claude Sonnet 5.5 and reasoning effort high:
claude --model sonnet --effort high

Terminal commands

Or paste these lines into a terminal. The first part installs every spell for Claude Code; the last line starts it with the same weapon and charge. Lines starting with # are notes or commands you type inside the agent.

# Loadout: Model to Three.js viewer
# Quest: Generate a 3D model and show it in a Three.js viewer
# Hero: Claude Code · Weapon: Claude Sonnet 5.5 · Charge: High
# From https://vibe-rpg-simulator.vercel.app/loadouts/threejs-model-viewer/

# 1. Learn the spells
# Craft: Meshy 3D Generation
npm install -g meshy-cli@0.4.3
npx -y skills add meshy-dev/meshy-3d-agent --skill meshy-3d-generation --skill meshy-3d-printing -g -y
# Craft: Three.js Loaders
npx skills add cloudai-x/threejs-skills
# Craft: Three.js Geometry
npx skills add cloudai-x/threejs-skills
# Test: Microsoft Playwright MCP
claude mcp add playwright npx @playwright/mcp@latest

# 2. Start the hero with this weapon and charge
claude --model sonnet --effort high

Edit a copy