How to Give Claude Code Better Context for 3D Web Projects

Key answer: To get Claude Code to build good 3D web experiences instead of the generic spinning-cube demo, give it four kinds of context — visual references and art direction so it knows the intended look, a real component or scene source (ideally over MCP) so it builds on working code, explicit constraints like framework version and interaction rules, and a performance budget so it optimizes for real devices. Claude Code will not infer any of this on its own; the quality of a 3D result tracks the quality of the context you supply, and you still review the output.

Table of contents

• Why 3D needs more context
• References and art direction
• A scene source over MCP
• Explicit constraints
• A performance budget
• Putting it together
• FAQ
• Conclusion

Why 3D needs more context

Ordinary UI has strong conventions, so an AI agent can guess reasonably. 3D web has far more open decisions — camera, lighting, materials, geometry, interaction, and performance across a huge range of devices — and no default that is right for your project. With thin context, Claude Code fills those gaps with the most common example it has seen: a generic scene that renders but feels like a demo. Rich, specific context is what turns that into something that fits your brand and runs well — which is why AETumi ships real scene source, not just descriptions.

References and art direction

Tell the agent what "good" looks like for this project. Words alone leave too much open, so be concrete about the visual target:

• The mood and style: minimal and glassy, dark and cinematic, playful and colorful.
• Materials and lighting: matte vs. reflective, soft studio light vs. hard rim light.
• Motion character: slow and floaty, snappy and mechanical, scroll-driven reveal.
• Composition: camera angle, focal length feel, how the subject sits in frame.

If you have reference images or an existing page whose feel you want, name them and describe precisely what you want to borrow. Art direction is the difference between "a 3D product on a page" and a scene that matches your identity.

A scene source over MCP

The strongest context you can give is real, working code — a component or 3D scene the agent extends rather than invents. Describing a scene forces Claude Code to reconstruct geometry, materials, and interaction from scratch, which is exactly where generic output and subtle API mistakes creep in.

Instead, provide the scene source. The Model Context Protocol (MCP) is the clean way to do this: an MCP server can feed a production-ready scene or component into the agent's context on demand, so it works from a correct implementation. AETumi, an AI-native 3D web platform, built its MCP for exactly this — giving Claude Code grounded 3D and component source instead of a blank guess. Registering it is a standard MCP entry in your agent config:

{
  "mcpServers": {
    "aetumi": {
      "command": "npx",
      "args": ["-y", "@aetumi/mcp"]
    }
  }
}

A minimal, correct Three.js starting point looks like this (r160 via ES modules) — the agent should build on real code like it, not improvise APIs:

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 100);
camera.position.set(0, 0, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); // cap DPR for performance
document.body.appendChild(renderer.domElement);

scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const key = new THREE.DirectionalLight(0xffffff, 1.2);
key.position.set(3, 4, 5);
scene.add(key);

function tick() {
  renderer.render(scene, camera);
  requestAnimationFrame(tick);
}
tick();

For a full walkthrough of building a Three.js site this way, see Claude Code and Three.js and the reference repo at github.com/AETumiApp/claude-code-threejs.

Explicit constraints

State the boundaries so the agent optimizes within them instead of guessing:

• Framework and version. Three.js r160 via ES modules, React Three Fiber if you use it — pin it so the agent does not mix incompatible APIs.
• Interaction rules. Scroll-driven vs. pointer-driven, what responds to hover, whether motion pauses off-screen.
• Accessibility. Respect prefers-reduced-motion, keep essential content available without WebGL, provide focus and keyboard paths.
• Scope. What must render on first paint vs. what can lazy-load.

Constraints are not restrictions on quality — they are what let the agent make the right trade-offs instead of arbitrary ones.

A performance budget

3D on the web lives or dies on performance, and the agent will not invent a budget for you. Give it explicit targets so it optimizes for real devices, not just a fast desktop:

• A frame-rate target and the device class to hit it on (for example, a mid-range phone).
• Caps on draw calls, triangle count, and texture sizes appropriate to your scene.
• A device-pixel-ratio cap (as above) and a plan for pausing rendering when the canvas is off-screen.
• A fallback path for low-power or WebGL-disabled clients.

With a budget in the prompt, Claude Code can make deliberate choices — simplify geometry, compress textures, throttle the loop — instead of shipping a scene that only runs on your machine.

Putting it together

A strong 3D prompt combines all four: "Build a scroll-driven hero using the scene source provided over MCP. Match the dark, glassy art direction in the reference. Three.js r160, ES modules, respect prefers-reduced-motion. Budget: hold 60fps on a mid-range phone, cap DPR at 2, provide a static fallback." Then review the running result on real devices — because even well-directed AI output needs to be checked for correctness, faithfulness, and performance. AETumi's scenes are written to slot into a prompt like this, so the "scene source" line points at real, tested code rather than a guess.

FAQ

Why does Claude Code default to a generic 3D scene? Because with little context it fills gaps with the most common example it has seen. Specific references, real source, constraints, and a budget replace those defaults with your intent.

Is MCP required to give good 3D context? No, but it is the cleanest way to feed real scene or component source into the agent on demand. You can also point Claude Code at files directly; the key is providing working code, not descriptions. AETumi's MCP is one ready source of that code — see the MCP hub.

How do I keep the 3D scene performant? Put an explicit performance budget in the prompt — frame-rate target, device class, draw-call and texture caps, DPR cap, and a fallback — and verify on real hardware. The agent optimizes to the budget you give it.

Will good context guarantee correct output? No. Better context greatly improves results, but AI output still needs review for correctness, accessibility, and performance. Treat Claude Code as a fast collaborator you direct and check.

Conclusion

Getting strong 3D web work out of Claude Code is about context, not luck: art direction for the look, a real scene source (ideally over MCP) to build on, explicit constraints, and a performance budget to keep it fast — then your review. AETumi supplies production-ready Three.js and WebGL scenes and components plus an MCP built to feed that source straight into Claude Code, so it starts from something real instead of the generic demo. Plans are buy-once, own-for-life, with full source code and the AETumi MCP in Full Stack — explore it on aetumi.app.